react 路由动态加载组件,实现按需加载。

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

当项目代码量不多时,把所有代码打包到一个文件的做法并不会有什么影响。但是,对于一个大型应用,如果还把所有的代码都打包到一

个文件中,显然就不合适了。试想,当用户访问登录页面时,浏览器加载的JS文件还包含其他页面的代码,这会延长网页的加载时间,给用户

带来不好的体验。理想情况下,当用户访问一个页面时,该页面应该只加载自己使用到的代码。解决这个问题的方案就是代码分片,将JS代码

分片打包到多个文件中,然后在访问页面时按需加载。

create-react-app支持通过动态import()的方式实现代码分片。import() 接收一个模块的路径作为参数,然后返回一个Promise对象,Promise对象的值就是待导入的模块对象。


首页 我们建立个importComponent 组件


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


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

你可能感兴趣的:(react 路由动态加载组件,实现按需加载。)