使用Webpack3 + React16怎么实现一个代码分割功能 - 行业资讯

　　介绍

使用Webpack3 + React16怎么实现一个代码分割功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

项目背景

最近项目里有个webpack版本较老的项目,由于升级和换框架暂时不被领袖层接受o(╥﹏╥)啊,只能在现有条件进行优化。

webpack3 +, React16

webpack v3配置检查

很明显项目的配置是从v1继承过来的,v1→v3的升级较为简单,参考官网https://webpack.js.org/migrate/3/即可。

装载机变为规则
不再支持链式写法的装载机,json-loader不需要配置
UglifyJsPlugin插件需要自己开启最小化

分析现有包的问题

使用webpack-bundle-analyzer构建包后,如图

使用Webpack3 + React16怎么实现一个代码分割功能

问题非常明显:

除了zxcvbn这个较大的包被拆出来,代码就简单的打包为了自动售货机和应用,文件很大。

动态进口拆分自动售货机

使用Webpack3 + React16怎么实现一个代码分割功能

分析卖主的代码,某些大包,例如libphonenumber。js,使用场景不是很频繁,将它拆出来,当使用到相关特性时再请求。

参考反应官方代码分割指南,https://react.docschina.org/docs/code-splitting.html进口

import {, PhoneNumberUtil },得到& # 39;google-libphonenumber& # 39; 　　function usePhoneNumberUtil () {//,才能使用PhoneNumberUtil 　　}

修改为动态<代码> import() 方式,然后和async/等待都支持用来获取异步数据

const LibphonenumberModule =,(),=祝辞,进口(& # 39;google-libphonenumber& # 39;) 　　function usePhoneNumberUtil () { 　　LibphonenumberModule才能(),然后({PhoneNumberUtil},=祝辞,{ 　　,,,//,使用PhoneNumberUtil 　　})才能　　}

当Webpack解析到该语法时,会自动进行代码分割。

修改后的效果:

使用Webpack3 + React16怎么实现一个代码分割功能

libphonenumber.js (1. chunk.js)从自动售货机中拆分出来了,并且在项目实际运行中,只有当进入usePhoneNumberUtil流程时,才会向服务器请求libphonenumber.js文件。

基于路由的代码分割

React.lazy

参考反应官方代码分割指南-基于路由的代码分割,https://react.docschina.org/docs/code-splitting.html route-based-code-splitting。

拆分前示例:

import React 得到& # 39;反应# 39;; 　　import {,路线,Switch },得到& # 39;react-router-dom& # 39;; 　　const Home =,进口(& # 39;。/线路/回家# 39;); 　　const About =,进口(& # 39;。/线路/关于# 39;); 　　　　const App =,(),=祝辞,( 　　& lt; Router> 　　,& lt; Suspense 后备={& lt; div>加载…& lt;/div>}祝辞　　& lt;才能Switch> 　　,,& lt; Route exact 路径=??组件={回家}/比; 　　,,& lt; Route 路径=?about",组件={}/比; 　　& lt;才能/Switch> 　　,& lt;/Suspense> 　　& lt;/Router> 　　);

拆分后示例:

import 反应,,{,lazy },得到& # 39;反应# 39;; 　　import {,路线,Switch },得到& # 39;react-router-dom& # 39;; 　　const Home =,懒惰((),=祝辞,进口(& # 39;。/线路/回家# 39;)); 　　const About =,懒惰((),=祝辞,进口(& # 39;。/线路/关于# 39;)); 　　　　const App =,(),=祝辞,(//,路由配置不变　　)

拆分后效果:

应用程序。js按照路由被webpack自动拆分成了不同的文件,当切换路由时,才会拉取目标路由代码文件。

使用Webpack3 + React16怎么实现一个代码分割功能

命名导出

该段引用自https://react.docschina.org/docs/code-splitting.html named-exports。

<代码>反应。懒惰的目前只支持默认导出出口(默认)。如果你想被引入的模块使用命名导出(名为出口),你可以创建一个中间模块,来重新导出为默认模块。这能保证树摇晃不会出错,并且不必引入不需要的组件。

//, ManyComponents.js 　　export const MyComponent =,/*,…, */; 　　export const MyUnusedComponent =,/*,…, */; //, MyComponent.js 　　{export MyComponent as default },得到“。/ManyComponents.js"