组件 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 服务部署到线上。

在服务器上运行：

node server.js

这样就可以通过在外网进行访问了。不过终端关闭后服务会停止，这时我们可以利用 PM2 管理工具，首先

npm install pm2

然后通过一条命令就能轻松地启动服务:

pm2 start ./server.js

现在终端关闭后也能正常地访问了。

总结

回过头梳理一下，我们写了近6000行代码，封装了13个UI基础组件，12个应用组件，完成了七大模块，可以说是实打实的项目经验，绝非简简单单的demo项目可以相比。更重要的是，我们践行了React中数据Immutable的思想，将性能优化由理论展开了实践，并在大大小小的组件封装过程中潜移默化地让大家体会react hooks的各种应用场景，可以说对React技术栈的同学是一个很好的巩固，对于之前掌握其他技术栈的同学也是一次新鲜的经历。

阅读全文