浅谈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 可以拖动的div实现代码 脚本之家修正版
Jun 26 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
详解Node全局变量global模块
Sep 28 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
javascript读取本地文件和目录方法详解
Aug 06 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生成随机密码的几种方法
2011/01/17 PHP
event.srcElement+表格应用
2006/08/29 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
python中的内置函数getattr()介绍及示例
2014/07/20 Python
python批量修改文件名的实现代码
2014/09/01 Python
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
财务方面个人工作的自我评价
2013/12/28 职场文书
咖啡馆创业计划书
2014/01/26 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
水电工岗位职责
2015/02/14 职场文书
百年校庆感言
2015/08/01 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
MySQL创建管理KEY分区
2022/04/13 MySQL
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS