内容：1.速度分析2.CDN分包3.多进程构建4.缩小构建范围5.使用缓存1.打包速度分析需要对当前项目各部分的打包时间有一个清晰的认识。我们使用speed-measure-webpack-plugin插件，它分析了webpack总的打包时间和各个plugin和loader的打包时间，这样我们就可以对打包耗时较长的部分进行优化。使用以下命令安装插件：yarnaddspeed-measure-webpack-plugin-D再次构建，查看各部分打包时间。2、在分析CDN分包前的打包体积时，发现react-dom和react是几个占用体积非常大的包，打包这些包时非常耗时。CDN分包可以让我们在打包过程中将具体的包分开，从而提高打包速度。排除一些库的打包需要借助html-webpack-externals-plugin插件，执行如下命令安装：yarnaddhtml-webpack-externals-plugin-D但如果webpack版本过高，安装中可能存在版本冲突：可以使用--force命令强制安装，然后卸载解决冲突。可以发现，使用CDN分包，构建速度快了2秒左右。3、多进程构建对于构建时间较长的模块，同时开启多个nodejs进程进行构建，可以有效提高打包速度。可以采用的一些方法有：thread-loaderHappyPack（作者不再维护）parallel-webpack本文使用thread-loader进行多进程构建。yarnaddthread-loader-D修改loader对应的webpack.config.js的rules部分。需要注意的是，这条规则需要放在其他规则之上。module:{strictExportPresence:true,rules:[//多进程构建{test:/.js$/,include:path.resolve('src'),use:["thread-loader",//耗时loader(如babel-loader)],}，实际打包时间优化了2s。4.缩小构建范围构建过程默认是全局搜索，非常耗时。通过在规则中手动配置文件搜索范围，可以缩小打包范围，从而提高打包速度。在webpack.config.js文件中配置如下：module.exports={//...module:{rules:[{test:/\.js$/,use:['babel-loader'],exclude:/node_modules/,},],},};由于babel-loader对文件的转换是非常耗时的，所以缩小构建范围首先就是缩小需要babel-loader处理的文件范围。可以使用test、include、exclude这三个配置项命中Loader需要应用规则的文件，使用include命中需要babel-loader处理的文件，exclude排除需要做的文件不需要处理，从而减少加载程序处理时间。范围。5、使用缓存使用缓存机制可以有效提高二次打包速度。目前webpack5有一个内置的缓存模块来缓存生成的webpack模块和块，以提高构建速度。它在开发中默认为type:'memory'并且在生产中被禁用。你可以通过设置cache:{type:'filesystem'}打开更多的配置项。比如我在webpack.config.js中配置如下：module.exports={cache:{type:'filesystem',},};那么第一次打包后，会在node_modules文件夹下生成一个cache文件夹。从而显着提高二次封装速度。
