浅谈webpack性能榨汁机(打包速度优化)


Posted in Javascript onJanuary 09, 2019

最近对项目的本地开发环境进行了打包速度优化,原有项目,网上能搜到的优化方案基本都加了,在16年低配mac pro 上打包时间为25秒多,但我发现细节做一些调整可能大大降低打包时间,最终优化到7秒多

dll

原有项目是线上和本地公用一套dll配置,因为antd这类ui库需要按需加载所以不能放到dll中,这时可以单独写一个dll配置,将所有第三方库添加到dll中。

这时因为.babelrc中添加了babel-plugin-import插件会导致优化不生效,所以需要对开发环境单独配置babel

浅谈webpack性能榨汁机(打包速度优化)

options的babelrc设置为false,然后重写一份babel配置,一定不要添加“import”插件

一个新问题,因为没有import插件,导致所有antd组件样式丢失。这时我在index-template.html中加入一行注释<!-- local-style -->,在本地打包时将其替换为antd相应版本在cdn上的css文件

浅谈webpack性能榨汁机(打包速度优化)

缓存

cache-loader专治花里胡哨!虽然你能在webpack的配置里找到n种缓存设置,但我发现cache-loader可以替代其它选项,它会在你的项目中创建一个 .cache-loader的文件夹,里面存放缓存文件,因为是直接写入硬盘,所以第一次打包的时候会多消耗几秒

babel-loader & 多线程

上面的图中可以看到我将babel-loader升级到8+,新的preset和plugin都有了命名上的变化。preset-env是用来替代以前201X的,通过targets可以指定目标代码(编译后代码)的版本,因为是本地开发,可以指定到chrome的高版本,这样很多新语法都不需要转换,可以节省一点时间(打包速度在10秒以下之后减一秒都是10%的提升啊!)不过这个方案要慎重使用,因为会造成线上本地环境不统一,难保不出现什么神奇的bug

拔掉HappyPack提升性能

在测试的过程中我发现一个神奇的事情,就是HappyPack反倒会降低打包时间,我经过反复测试,似乎babel-loader8+自带了多线程优化,所以HappyPack已经没用了(反而因为线程通信造成了资源浪费)。babel-loader8+的cpu使用率以及打包时间和babel-loader6+加HappyPack是相差不多的,但我在google上搜索时并没有看到有人提及此事,官网也没看到有个说明(管他那么多呢,能提升速度就行啦!)

后续计划

这个项目是两个人迭代一年份的代码量,按照上面的配置大部分项目应该都可以优化到10秒左右的速度(看项目大小,20秒以下应该都是正常的),还有一些小的优化细节对性能影响不大所以忽略掉了。目前webpack还是3+版本,因为4的一些变化担心影响过大,暂时没升级,升级之后应该还会有一些小提速
这7秒还不是最终的速度,我估计5秒应该没啥问题,后面再想优化就需要脑洞大开了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 冒号 使用说明
Jun 06 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
Node.js的进程管理的深入理解
Jan 09 #Javascript
从vue源码看props的用法
Jan 09 #Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 #Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 #Javascript
一个因@click.stop引发的bug的解决
Jan 08 #Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 #Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 #Javascript
You might like
php屏蔽错误及提示的方法
2020/05/10 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
Python3常用内置方法代码实例
2019/11/18 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
幼儿园托班开学寄语
2014/01/18 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
教师工作失职检讨书
2014/09/18 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
教师创先争优承诺书
2015/04/27 职场文书
怎样写家长意见
2015/06/04 职场文书
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android