浅谈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 相关文章推荐
一个简单的js树形菜单
Dec 09 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
JavaScript将字符串转换成字符编码列表的方法
Mar 19 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 Javascript
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
一个简易需要注册的留言版程序
2006/10/09 PHP
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
基于vue.js实现的分页
2018/03/13 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
国庆节促销广告语2014
2014/09/19 职场文书
求职导师推荐信范文
2015/03/27 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
Python max函数中key的用法及原理解析
2021/06/26 Python
python 进阶学习之python装饰器小结
2021/09/04 Python
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript