浅谈Webpack多页应用HMR卡住问题


Posted in Javascript onApril 24, 2019

起因

在公司搭建了套webpack多页面应用脚手架,开始用着很爽,解决了既想使用Vue的模块化开发,又想做多页打包上线管理的初衷,但是随着业务项目的增加,我发现npm run dev的时候,每次热加载,webpack的反应都很慢。

基本会卡在

94% assets optimization95% emitting

这个步骤很久

准备具体定位一下问题的原因。由于项目基于vue-cli改写的多页应用脚手架,手动重写了HtmlWebpackPlugin插件,所以基本猜测和这个有关,后来证明也真的是这个引起的。

我们可以在package.json中启动dev的时候添加--profile命令,去看启动的详情。

浅谈Webpack多页应用HMR卡住问题

我们可以看到,asset optimization过程耗时2s左右,有时候会更长,所以基本确定就是这个地方卡住了HMR。

那么问题来了,怎么优化这里?

优化思路-1

第一想法是,在dev的时候,加入参数或手动更改config,只针对当前开发的项目进行模块的加载。

更改webpack配置是比较直接的方案,比如把当前启动的目录配置好(buildingPage), new HtmlWEbpackPlugin的时候进行判断即可。

浅谈Webpack多页应用HMR卡住问题

第二个方案,当然也可以手写webpack-dev-server。

dev-server这个在老版本是在build目录下面的,比较方便改动重写,然而新的版本,是在node_modules中的已经加载的模块,

浅谈Webpack多页应用HMR卡住问题

重写的话需要自己把这个东东搞一套,加入参数进行判断处理,本人还没有时间进行尝试,如果有人有时间的可以试试能否改善HMR效率。

实践证明第一个方案确实会提高HMR速度,但由于项目是多人共同开发和维护,每个开发者更改自己的config配置,极容易造成提交svn\git冲突,或忘记修改config等状况,所以除了个人维护的项目,并不建议这么做。

优化思路-2

其实这个问题的具体原因就是改为多入口之后,在HtmlWebpackPlugin中会对每一个入口文件都执行一遍emit中所有代码逻辑,正是这个原因影响了速度。

在看一些参考资料之后,我发现已经有现有的造轮子可以使用了,就是 [html-webpack-plugin-for-multihtml] (https://github.com/daifee/html-webpack-plugin-for-multihtml)

该插件通过在webpack done钩子函数中设置相关变量,来保证原html-webpack-plugin插件中emit仅触发一次全部流程。来达到提速的效果。升级以后,修改文案,HMR的速度从原来的秒级改为毫秒级。

浅谈Webpack多页应用HMR卡住问题

可以看出 asset optimization已经优化到毫秒级。

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

Javascript 相关文章推荐
javascript数组的扩展实现代码集合
Jun 01 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
小程序自定义弹框效果
Nov 16 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 #Javascript
vue模仿网易云音乐的单页面应用
Apr 24 #Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 #Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 #Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 #Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 #Javascript
js实现全选反选不选功能代码详解
Apr 24 #Javascript
You might like
php图片验证码代码
2008/03/27 PHP
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
解javascript 混淆加密收藏
2009/01/16 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
vue小白入门教程
2018/04/02 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
python 排序算法总结及实例详解
2016/09/28 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
python实现桌面托盘气泡提示
2019/07/29 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
一篇.NET面试题
2014/09/29 面试题
员工考核评语大全
2014/04/26 职场文书
2014年手术室工作总结
2014/11/26 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
停电通知范文
2015/04/16 职场文书
房贷工资证明范本
2015/06/12 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书