浅谈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 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
js实现橱窗展示效果
Jan 11 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
微信小程序实现跳转的几种方式总结(推荐)
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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
PHP中如何定义和使用常量
2013/02/28 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
Symfony控制层深入详解
2016/03/17 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
JS 文件传参及处理技巧分析
2010/05/13 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
python中map()与zip()操作方法
2016/02/27 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
SQL面试题
2013/04/30 面试题
秋季运动会表扬稿
2014/01/16 职场文书
党员干部承诺书范文
2014/03/25 职场文书
学校施工安全责任书
2015/01/29 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
同学聚会祝酒词
2015/08/10 职场文书
中学团支部工作总结
2015/08/13 职场文书
团支部书记竞选稿
2015/11/21 职场文书
高中美术教学反思
2016/02/17 职场文书
Django+Celery实现定时任务的示例
2021/06/23 Python