默认情况下，当在项目根路径下执行npm run build时，create-react- app内部使用webpack将src/路径下的所有代码打包成一个JS文件和一个 CSS文件。
当项目代码量不多时，把所有代码打包到一个文件的做法并不会有什么影响。但是，对于一个大型应用，如果还把所有的代码都打包到一
个文件中，显然就不合适了。试想，当用户访问登录页面时，浏览器加载的JS文件还包含其他页面的代码，这会延长网页的加载时间，给用户
带来不好的体验。理想情况下，当用户访问一个页面时，该页面应该只加载自己使用到的代码。解决这个问题的方案就是代码分片，将JS代码
分片打包到多个文件中，然后在访问页面时按需加载。
create-react-app支持通过动态import()的方式实现代码分片。import() 接收一个模块的路径作为参数，然后返回一个Promise对象，Promise对象的值就是待导入的模块对象。
首页 我们建立个importComponent 组件
然后到 router 路由文件里面引用
这样引入之后 打包后的js就会多出几个 ，这样就可以对react性能优化，实现组件的按需加载
网友评论