浅谈Webpack多页应用HMR卡住问题
作者:朝阳银枪小霸王 发布时间:2023-07-20 01:27:12
起因
在公司搭建了套webpack多页面应用脚手架,开始用着很爽,解决了既想使用Vue的模块化开发,又想做多页打包上线管理的初衷,但是随着业务项目的增加,我发现npm run dev的时候,每次热加载,webpack的反应都很慢。
基本会卡在
94% assets optimization95% emitting
这个步骤很久
准备具体定位一下问题的原因。由于项目基于vue-cli改写的多页应用脚手架,手动重写了HtmlWebpackPlugin插件,所以基本猜测和这个有关,后来证明也真的是这个引起的。
我们可以在package.json中启动dev的时候添加--profile命令,去看启动的详情。
我们可以看到,asset optimization过程耗时2s左右,有时候会更长,所以基本确定就是这个地方卡住了HMR。
那么问题来了,怎么优化这里?
优化思路-1
第一想法是,在dev的时候,加入参数或手动更改config,只针对当前开发的项目进行模块的加载。
更改webpack配置是比较直接的方案,比如把当前启动的目录配置好(buildingPage), new HtmlWEbpackPlugin的时候进行判断即可。
第二个方案,当然也可以手写webpack-dev-server。
dev-server这个在老版本是在build目录下面的,比较方便改动重写,然而新的版本,是在node_modules中的已经加载的模块,
重写的话需要自己把这个东东搞一套,加入参数进行判断处理,本人还没有时间进行尝试,如果有人有时间的可以试试能否改善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的速度从原来的秒级改为毫秒级。
可以看出 asset optimization已经优化到毫秒级。
来源:https://juejin.im/post/5cbad106518825324a5a7c1e
猜你喜欢
- 好多同志对 iframe 是如何控制的,并不是十分了解,基本上还处于一个模糊的认识状态.注意两个事项,ifr 是一个以存在的 iframe
- 最近网上流行着一些采集程序,更多人拿着这些东西在网上叫卖,很多不太懂的人看着那些程序眼羡,其实如果你懂一些ASP,了解自动采集程序的原理后,
- 没注意到MooTools的Cookie类在写的时候自己做了一次encode,在读的时候做了一次decode,在一般的情况下,这个不会有什么问
- 话说网站首页是用.NET语言写的,而二级栏目页却是用ASP写的,然后再配上众多全手工的静态专题页,整个网站形成了一个大杂烩。想要在这大杂烩中
- 无论是在小得可怜的免费数据库空间或是大型电子商务网站,合理的设计表结构、充分利用空间是十分必要的。这就要求我们对数据库系统的常用MySQL数
- rem ---表单提示函数 Being-----------------------------CODE Copy ... Fu
- 本文实例讲述了正则表达式匹配ip地址实例。代码结构非常简单易懂。分享给大家供大家参考。主要实现代码如下:import rereip = re
- 一扯上文化二字,总觉虚无缥缈、漫无边际,或者老气横秋,如何有趣地利用中华文化的思想和符号,结合现代的元素,使其成为有意思的传播手法,这个问题
- 把这两个很普遍性的网友比较关心的问题总结回答一下。in和exist的区别从sql编程角度来说,in直观,exists不直观多一个select
- 由于笔者最近在做一个跨数据库操作的测试,开始做IBatisNet (IBatis.DataMapper.1.6.2/IBatis.DataA
- 我插入Mysql5的中文一直是乱码。但是直接使用mysqlAdmin,EMS等工具插入DB就不是乱码。而且我还可以使用程序正常地读出来。原因
- 实现过程最近在尝试openai的相关函数,所以今天就来盘点盘点下 createChatCompletion 函数,听说是专门为了聊天创立的a
- [sql] -- ===================【创建存储过程】===================== USE [Message
- 文本的排版依据语言的不同会有一些格式上的要求,比如简体中文中类似逗号、分号等标点符号不会出现在一行的开头,对于英文来讲就是一个完整单词不会在
- 网站设计时,有一个最常用的指导性原则:页面长度原则上不超过3屏,宽度不超过1屏。这个原则明显是从用户的体验出发,特别是宽度不超过一屏,其最基
- MySQL是关系型数据库中的明星,MongoDB是文档型数据库中的翘楚。下面通过一个设计实例对比一下二者:假设我们正在维护一个手机产品库,里
- 描述微软开发的两个动态库存在后门允许用户查看ASP文件源程序和下载整个网站详细随IIS和Frontpage Extention server
- 1. 什么是 CSV 文件CSV(逗号分隔值)文件是使用逗号分隔信息的文本文件。该文件的每一行都是一条数据记录,也就意味着它可以用于以表格的
- 这个格式是我自创的,经常有人问我为什么,这里做个简单总结:1、分类,一个模块或者同类功能定义为一类定义,每类定义之间用段落隔开。2、分级,每
- 兼容主流浏览器,独立样式表,可以很方便的进行视觉效果自定义截图:模拟下拉菜单演示代码:<!DOCTYPE html PUBLIC &q