webpack优化策略
量化工具:
speed-measure-webpack-plugin 测量各个插件和loader所花费的时间。
webpack-boundle-analyzer 分析打包后的文件大小
共性优化策略:
1.减小文件搜索范围
resolve.modules :配置模块库(即 node_modules)所在的位置
loader配置include\exclude
module.noParse 不需要解析某些模块的依赖(这些模块并没有依
赖,或者并根本就没有模块化)jquery \ lodash \ moment
2.happyPack 加速代码构建 或者 thread-loader
利用cpu多核,采用多个子进程去解析和遍历js\css.完成后再发到主进程
3.优化babel-loader
cacheDirectory 为true
引入cache-loader 在性能开销较大的loader之前添加,存在磁盘中
4.不需要打包编译的插件库换成全局<script>标签引入的方式
例如: react / react-dom / jquery 等
然后在webpack配置里使用 expose-loader
或 externals
或 ProvidePlugin
提供给模块内部使用相应的变量
5.合理抽离公共代码
CommonsChunkPlugin / webpack4的 optimization.splitChunks
6.代码层面
没有使用到的依赖不要引入.
按模块化的方式引入其中一部分
import debounce from 'lodash/debounce';
7.采用异步加载,使用代码切割 import() / reuqire.ensure
8.IgnorePlugin 忽略第三方包指定目录
例如:忽略moment下的.locale包,然后在使用的时候指定具体与语言
new webpack.IgnorePlugin(/^\.\/locale$/,/moment$/)
import 'moment/locale/zh-cn'
区分环境,分开配置
开发环境:
1.免刷新:
--hot 热更新热替换,不丢失状态
2.提高构建速度:
DllPlugin / DllReferencePlugin 把第三方库代码分离开(对于依赖的第三方库打包成动态链接库)
拷贝静态文件 copy-webpack-plugin
3.不做无意义的操作:
比如:开发环境不需要 代码压缩、目录内容清理、计算文件hash、提取CSS文件
4.选择合适的devtool .
生产环境:
多线程压缩文件 ParallelUglifyPlugin / TerserPlugin:
【webpack自带的UglifyJS是单线程压缩输出】
如何使用tree-shaking?
1).确保代码是es6格式,即 export,import
2).package.json中,设置sideEffects
3).确保tree-shaking的函数没有副作用
4).babelrc中设置presets [["env", { "modules": false }]] 禁止转换模块,交由webpack进行模块化处理
5).结合uglifyjs-webpack-plugin
网友评论