浅谈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关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 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 APC缓存配置、使用详解
2014/03/06 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
jstree的简单实例
2016/12/01 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
element跨分页操作选择详解
2020/06/29 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
Python程序语言快速上手教程
2012/07/18 Python
python任务调度实例分析
2015/05/19 Python
利用python画一颗心的方法示例
2017/01/31 Python
Python处理中文标点符号大集合
2018/05/14 Python
python修改FTP服务器上的文件名
2019/09/11 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
建筑项目策划书
2014/01/13 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
医院营销工作计划
2015/01/16 职场文书
大明湖导游词
2015/02/03 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
python神经网络ResNet50模型
2022/05/06 Python
nginx rewrite功能使用场景分析
2022/05/30 Servers