vue 打包_优化vue项目打包速度(webpack)

提高 webpack 构建速度的一些方法:

  • 减少 resolve 的解析
  • 减少 plugin 的消耗
  • 换种方式处理图片
  • 使用 DLLPlugin
  • 积极更新 webpack 版本
http://www.hangge.com/blog/cache/detail_2105.html​www.hangge.com
15f2c97e4408da284e79e83124f9c4e3.png

Vue.js - 提高项目build打包速度(webpack构建性能优化技巧汇总)

Vue.js - 提高项目build打包速度(webpack构建性能优化技巧汇总)​www.hangge.com
15f2c97e4408da284e79e83124f9c4e3.png

原打包速度

dcb3a0d17f2088541a919390d94797e3.png

添加:webpack-parallel-uglify-plugin 后

5349b28827b06388e2d82cfc4454f30f.png

添加

modules: [
      resolve('src'),
      resolve('node_modules'),
      resolve('static') 
    ],

注意这里的resolve('static'), 因为项目目录中

2a294a25a6cd70d0d0c333e890104a54.png

有部分书写不规范将静态资源放到了src同级目录static里面了,所以要加上

7a604608e0c6f7a0133aa1b7b2fce02c.png

d9db7e6a31e91f313672d0d16fcde816.png

aac0f42989893399d395f2c380f27e5d.png

加 HappyPack 时间反而变长了 看来我的项目不够大,删掉删掉

473d9e1557449637407b1087f88bac2c.png

加DllPlugin, binggo 可以!

5e960cf051bd133b4419c85fd5508ea3.png

参考

DllPlugin提升webpack打包速度​www.jianshu.com
f80f10e6df50924039b6204849661a9a.png
DllPlugin提升webpack打包速度​www.jianshu.com
f80f10e6df50924039b6204849661a9a.png
DllPlugin | webpack​link.jianshu.com 人类身份验证 - SegmentFault​segmentfault.com Webpack 打包优化之速度篇​ningyu1.github.io Webpack 打包优化之体积篇​ningyu1.github.io
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值