webpack4性能优化

好用的webpack4插件

speed-measure-webpack-plugin

打包速度分析插件

1
2

npm install --save-dev speed-measure-webpack-plugin

具体配置查看speed-measure-webpack-plugin，配置完成之后执行打包命令即可在终端看见打包时间分析。

progress-bar-webpack-plugin

打包进度展示

1
2

npm install --save-dev progress-bar-webpack-plugin

具体配置查看progress-bar-webpack-plugin，配置完成之后执行打包命令即可在终端看见打包进度。

cache-loader

loader的缓存,可以加快打包速度，根据前面的速度分析插件可以看出哪个loader模块打包较慢。进而配置cache-loader。

1
2

npm install --save-dev cache-loader

具体配置查看cache-loader，配置完成之后打包时间会变快。

hard-source-webpack-plugin

cache-loader对指定loader缓存，而hard-source-webpack-plugin对整个工程开启缓存。

1

npm install --save-dev hard-source-webpack-plugin

具体配置查看hard-source-webpack-plugin。

thread-loader

开启多核压缩 happypack 多线程编译webpack(小项目不建议使用，复杂项目才有效果)

optimize-css-assets-webpack-plugin

CSS的多核压缩

1

$ npm install --save-dev optimize-css-assets-webpack-plugin

具体配置查看optimize-css-assets-webpack-plugin。

terser-webpack-plugin

JavaScript的多核压缩可以开启terser-webpack-plugin。(主要是生产环境使用)

1

npm install terser-webpack-plugin --save-dev

具体配置查看terser-webpack-plugin。

webpack-build-notifier

打包成功或者失败时的提示

1

npm install webpack-build-notifier --save-dev

具体配置查看webpack-build-notifier。