webpack性能优化策略集锦
1.更新版本,包括node、npm、yarn、webpack等,新版本使用更新的特性,优化更好。一句话,整新不整旧。
2.使用stats分析打包结果。官方打包以后会提供一个stats.json文件,里面包含此次打包的详情,可以使用官方提供的stats分析工具进行针对性优化。另外有第三方工具 webpack-bundle-analyzer 也可帮助分析,可自行百度关键词。
3.分析打包各阶段的总耗时,可通过 speed-measure-webpack-plugin 这个插件进行分析,包含每个loader、plugin所耗费时间,从而进行针对分析。使用方法自行搜索。
4.使用多进程打包。借助以下三个工具进行打包,发挥多核cpu的能力。
5.分离第三方模块,仅第一次进行打包,第二次以后,若引用的第三方模块没有改变,则仅打包自己的文件,可使用 DllPlugin 这个工具进行。
6.开启缓存,提升二次构建速度。主要针对loader和plugin的缓存,可通过以下三种方式进行。
babel-loader
开启缓存terser-webpack-plugin
开启缓存- 使用
cache-loader
或者hard-source-webpack-plugin
7.对尽可能少的模块应用loader。使用 loader
的时候,我们需要在尽量少的模块中去使用。我们可以借助 include
和 exclude
这两个参数,规定 loader
只在那些模块应用和在哪些模块不应用。
8.plugin尽可能精简且可靠,同样的功能尽可能使减少plugin的使用。
9.合理使用resolve配置项,例如extensions、mainFiles、alias、modules等。
10.尽可能减少冗余模块。使用tree-shaking将冗余代码去掉。包括js、css
11.使用image-webpack-loader进行图片压缩。
12.使用动态 polyfill 服务。一般为了兼容低版本的浏览器,使低版本的浏览器也能支持类似 promise
、Map
、Set
等方法,我们需要引入类似 @babel/polyfill
这样的垫片,但是考虑到每一款浏览器所需的 polyfill
都是不一样的,有些可能根本就不需要,而 polyfill
的特点是非必须和不变。
13.合理使用sourceMap。根据自己情况配置sourceMap的配置项。
14.在开发环境使用内存编译,开发的时候使用webpack-dev-server进行打包开发,它使用的是内存编译存储,不会放到dist文件中。
列举的14个方向是比较基础的,性能优化的方式还有很多,可以在实践中继续摸索