react打包app_react 路由动态加载组件，实现按需加载

默认情况下，当在项目根路径下执行npm run build时，create-react- app内部使用webpack将src/路径下的所有代码打包成一个JS文件和一个 CSS文件。

当项目代码量不多时，把所有代码打包到一个文件的做法并不会有什么影响。但是，对于一个大型应用，如果还把所有的代码都打包到一个文件中，显然就不合适了。试想，当用户访问登录页面时，浏览器加载的JS文件还包含其他页面的代码，这会延长网页的加载时间，给用户带来不好的体验。理想情况下，当用户访问一个页面时，该页面应该只加载自己使用到的代码。解决这个问题的方案就是代码分片，将JS代码分片打包到多个文件中，然后在访问页面时按需加载。

create-react-app支持通过动态import()的方式实现代码分片。

import() 接收一个模块的路径作为参数，然后返回一个Promise对象，Promise对象的值就是待导入的模块对象。

首页 我们建立个importComponent 组件。

然后到 router 路由文件里面引用

这样引入之后 打包后的js就会多出几个 ，这样就可以对react性能优化，实现组件的按需加载。