摘要： 项目升级为react-router4后，就尝试着根据官方文档进行代码分割。https://reacttraining.com/react-router/web/guides/code-splitting 在实际项目中，js,css文件默认通过webpack打包的话会很大，动不动就好几兆。 在实际场景中，我们需要保证首屏的时间展现时间比较短，需要把首屏没有 涉及到 其他页面的 业务和组件 进行按需加载。 使用按需加载的话，如果只是修改了页面的逻辑，也不用整个文件加载，一定程序上增加了浏览器缓存的利用 下面就一步一步的介绍在我的项目中是怎么实现Code Splitting的。 根据webpack文档 https://webpack.js.org/guides/code-splitting/ 推荐的代码分割的方式是 import(), 当然 require.ensure() 作为兼容，还是支持的。 而react-router4 文档上说到的 bundle-loader 组件就是通过 require.ensure 实现的。 阅读全文