浅谈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 相关文章推荐
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
layui关闭层级、简单监听的实例
Sep 06 Javascript
微信小程序实现聊天室
Aug 21 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 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利用cookie实现访问次数统计代码
2011/05/19 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
python 用下标截取字符串的实例
2018/12/25 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
深入浅析Python代码规范性检测
2020/07/31 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
消防安全管理制度
2014/02/01 职场文书
趣味运动会广播稿
2014/09/13 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
检察院起诉意见书
2015/05/20 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书