create-react-app模块按需加载

介绍

本文中针对使用create-react-app创建的项目进行项目打包优化，有关Vue项目中的打包优化可以参考Vue-Cli3+eleUI项目打包优化。

路由懒加载

默认情况下，当下项目根路径下执行npm run build时，create-react-app内部使用webpack将src/路径下的所有代码打包成一个JS文件和一个CSS文件。
当项目代码量过多时，这样就不合适了。
试想，当用户访问登录页面时，浏览器加载的JS文件还包含其他页面的代码，这会延长网页的加载时间，给用户带来不好的体验。
理想情况下，当用户访问一个页面时，该页面应该只加载自己使用到的代码，所以我们需要代码分片，将JS代码分片打包到多个文件中，然后在访问页面时按需加载。
如何实现呢？
新建一个专门用来懒加载导入的文件

// asyncComponent.js
import React, { Component } from 'react'

export default function asyncComponent (importComponent) {
  class AsyncComponent extends Component {
    state = {
      component: null // 动态加载的组件
    }
    componentDidMount () {
      importComponent().then(mod => {
        this.setState({
          component: mod.default ? mod.default : mod
        })
      })
    }
    render () {
      // 渲染动态加载的组件
      const C = this.state.component
      return C ? <C {...this.props} /> : null
    }
  }
  return AsyncComponent
}

路由文件中使用

// router/index.js
import asyncComponent from './asyncComponent'
const Login =  asyncComponent(() => import('../views/login'))

const appRoutes = [
  {
    path: '/login',
    component: Login
  }
]

export { appRoutes }

执行打包

npm run build

会看到打包后的js文件的chunk会被分成好多个代码分片，并且文件都有对应的文件名，因为我们使用了Magic Comments魔术注释法。
我们看webpack中对打包的chunkName的配置

对，name没有生效，自动生成的都是数字。

这样[name]就被我们自定义啦！

版本号

create-react-app@3.3.0

"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"webpack": "4.44.2",
"webpack-dev-server": "3.11.0",