# 组件 CodeSpliting
目前所有的组件已经开发完成，在打包之前，我们可以对组件进行代码分割，达到组件懒加载的效果，这也是性能优化的一个手段，因为没必要在一开始加载所有组件，尤其在应用特别复杂、组件规模非常庞大的时候，这样可以大幅提升首屏加载速度。
在路由代码中:
import React from 'react';
import {Redirect} from "react-router-dom";
import Home from '../application/Home';
const RecommendComponent = lazy (() => import ("../application/Recommend/"));
const SingersComponent = lazy (() => import ("../application/Singers/"));
const RankComponent = lazy (() => import ("../application/Rank/"));
const AlbumComponent = lazy (() => import ("../application/Album/"));
const SingerComponent = lazy (() => import ("./../application/Singer/"));
const SearchComponent = lazy (() => import ("./../application/Search/"));
const SuspenseComponent = Component => props => {
return (
<Suspense fallback={null}>
<Component {...props}></Component>
</Suspense>
)
}
export default [
{
path: "/",
component: Home,
routes: [
{
path: "/",
exact: true,
render: () => (
<Redirect to={"/recommend"}/>
)
},
{
path: "/recommend/",
component: SuspenseComponent (RecommendComponent),
routes: [
{
path: "/recommend/:id",
component: SuspenseComponent (AlbumComponent)
}
]
},
{
path: "/singers",
component: SuspenseComponent (SingersComponent),
routes: [
{
path: '/singers/:id',
component: SuspenseComponent (SingerComponent)
}
]
},
{
path: "/rank/",
component: SuspenseComponent (RankComponent),
key: "rank",
routes: [
{
path: "/rank/:id",
component: SuspenseComponent (AlbumComponent)
}
]
},
{
path: "/album/:id",
exact: true,
key: "album",
component: SuspenseComponent (AlbumComponent)
},
{
path: "/search",
exact: true,
key: "search",
component: SuspenseComponent (SearchComponent)
}
]
}
]
@前端进阶之旅: 代码已经复制到剪贴板
# 部署
如果想要部署，直接执行:
npm run build
@前端进阶之旅: 代码已经复制到剪贴板
现在打包会生成 build 目录。
然后写这样一段代码:
// 项目根目录下
// 相应的 express 和 compression 要装好
var express = require ('express')
var compression = require ('compression')
// 端口可以自己定义
var port = process.env.PORT || 8010;
var app = express ()
// 开启 gzip 压缩
app.use (compression ())
app.use (express.static ('./build'))
module.exports = app.listen (port, function (err) {
if (err) {
console.log (err)
return
}
console.log ('Listening at http://localhost:' + port + '\n')
})
@前端进阶之旅: 代码已经复制到剪贴板
利用 express 服务部署到线上。
在服务器上运行：
