1. require()的写法改成import(), 需要注意import()返回值是一个Promise

   // require可以这么写
   const a=require('./xxx')
   // 换成import就需要写成await了
   const a=await import('./xxx')

2. 修改webpack配置，在output这条下面增加chunkFilename

   output: {
    // 打包文件存放根路径
    path: resolve('/dist'),
    // 打包后入口文件名
    filename: 'js/[name].bundle.[hash].js',
    // 打包后需要拆出来的异步文件名
    chunkFilename: 'js/chunk.[name].[hash].js',
   }

3. 以上步骤已经搞定了webpack打包拆分文件和按需加载的问题，接下来把路由也增加支持异步模式

4. 老代码路由长这样：

   routes=[
   {getComponent: _=>require('pages/Index'), key: 'INDEX', path: '/index'},
   {getComponent: _=>require('pages/Wrong'), key: 'WRONG', path: '/wrong'},
   {getComponent: _=>require('pages/Loading'), key: 'LOADING', path: '/loading', exact: 1},
   ]
   getRouter=_=><Router history={History}>
   <Switch>
    {routes.filter(a=>!a.exact).concat(routes.filter(a=>a.exact)).map(({exact, key, getComponent, path})=>{
      if(exact) return <Route key={key} component={getComponent().default} exact />
      else return <Route key={key} path={path} component={getComponent().default} />
    })}
   </Switch>
   </Router>

5. 第一步把routes里的require全部改成import

6. 第二步把component={getComponent} 改成 component={loadComponent(getComponent)}

7. 接下来编写loadComponent方法

   function loadComponent(getComponent) {
    return class extends Component{
      constructor(props) {
        super(props)
        this.state={
          component: null
        }
      }
            // 仅在组件被挂载时才加载
      async componentDidMount() {
        const component=await getComponent()
        this.setState({component: component.default})
      }
      render() {
        const T=this.state.component
        if(T) return <T />
        return null
      }
    }
   }

8. 完成

按照以上配置升级之后，在routes里把引用方法写成require，打包之后路由文件就是同步加载的，写成import，就是异步加载的，除了routes里的引用写法以外，其他地方都无需再修改。

相关文档

暂无

随便看看

1. css3自定义滚动条样式

2. mac ssh透过代理连接

3. npm远程服务器某些配置不兼容代理的解决办法

4. jxa运动指令脚本

5. python 用摄像头拍照并写入文件

6. 搜索命令整理

7. 判断变量是否 0 或者 '0'

8. heroku查看app使用时间

9. dd备份/还原

10. 树莓派配置wifi热点

11. webpack使用外部资源

12. 树莓派配置收发邮件

13. 随机取某个概率区间的代码

14. 数据库清理优化

15. 感谢beego陪伴我度过那不靠谱的半年