9

webpack构建速度优化

常规优化方法

分离基础脚本

  1. 使用webpack.DllPlugin优化,其实并没有优化速度,只是把一些不需要经常变更的部分提前构建,之后只需要构建变更的部分就可以了,确实优化了时间
  2. 使用external,不构建基础脚本,使用外部脚本引入,确实减少了时间

多进程构建

  1. loader多进程,happypack,据测试没有提升速度,也许是webpack4.0已经使用了多进程
  2. 压缩多进程,UglifyJsPlugin开启parallel: true稍微提升了一些速度

使用cache

  1. loader的cache开启,第一次不会有提升,之后提升巨大,一定要开启,强烈推荐
  2. 使用HardSourceWebpackPlugin,再cache基础之上仍然有巨大的提升,强烈推荐

综上 使用缓存和剥离基础代码是优化的二种主要策略,多进程策略应该会在后续webpack版本中发挥越来越弱的作用。

webpack还是太烦,配置依然很多,难道前端工程一定要依赖webpack吗?

关注我的微信公众号,更多优质文章定时推送

clipboard.png


frontoldman
4.5k 声望1.3k 粉丝

前端开发者