目录：1、速度剖析2、cdn分包3、多过程构建4、放大构建范畴5、应用缓存1、打包速度剖析
在进行打包速度优化之前，须要对以后我的项目每个局部的打包工夫理解分明。
咱们借助 speed-measure-webpack-plugin 插件，它剖析 webpack 的总打包耗时以及每个 plugin 和 loader 的打包耗时，从而让咱们对打包工夫较长的局部进行针对性优化。
通过以下命令装置插件：
yarn add speed-measure-webpack-plugin -D再次build就能看到各个局部的打包耗时
2、CDN分包
之前对打包体积进行剖析的时候，发现react-dom、react是占据体积十分大的几个包，在打包这些包的时候就十分耗时。cdn分包能够让咱们在打包过程中将特定包分离出来，从而晋升打包速度。
排除局部库的打包须要借助 html-webpack-externals-plugin 插件，执行如下命令装置：
yarn add html-webpack-externals-plugin -D然而如果Webpack的版本过高，装置可能呈现版本抵触：
能够先用 --force命令强制装置，等呈现抵触问题再卸载解决。
能够发现应用cdn分包，构建速度快了2s左右
3、多过程构建
对于耗时较长的模块，同时开启多个 nodejs 过程进行构建，能够无效地晋升打包的速度。能够采取的一些形式有：
thread-loader
HappyPack（作者曾经不保护）
parallel-webpack
本文采纳thread-loader进行多过程构建。
yarn add thread-loader -D更改webpack.config.js对应loader的rules局部，须要留神的是，该条rule须要放在其余rule的上方。
module: { strictExportPresence: true, rules: [ // 多过程构建 { test: /.js$/, include: path.resolve('src'), use: [ "thread-loader", // 耗时的 loader （例如 babel-loader） ], },理论打包工夫又优化了2s。
4、放大构建范畴
构建过程是默认全局查找，这十分的耗时。通过手动配置rules中的文件查找范畴，能够缩小打包的范畴，从而晋升打包的速度。
在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去排除不须要被解决的文件，从而放大了 Loader 解决文件的范畴。
5、应用缓存
通过应用缓存机制能无效晋升二次打包速度。目前webpack5 内置了 cache 模块，缓存生成的 webpack 模块和 chunk，来改善构建速度。它在开发环境下会默认设置为 type: 'memory' 而在生产环境中被禁用。能够通过设置 cache: { type: 'filesystem' } 来凋谢更多配置项。
比方我在webpack.config.js中如下配置：
module.exports = { cache: { type: 'filesystem', },};那么第一次打包后，就会在node_modules文件夹上面生成一个cache文件夹，从而第二次打包速度显著晋升。