详解关于webpack多入口热加载很慢的原因


Posted in Javascript onApril 24, 2019

之前为公司搭建了套webpack多页面应用脚手架,起初用得挺爽,资源整合打包,组件化开发,各种组件复用,需要什么就拿什么,后来入口有50个页面了,慢慢的发现了每次按保存后的热加载等待时间越来越长,需要等待10几秒,实在太影响开发效率,于是我查找原因。

观察发现,每次到热加载时会在emitting HtmlWebpackPlugin这停留很久。

详解关于webpack多入口热加载很慢的原因

于是我想知道它到底停留了多长时间呢?

在package.json内加入--profile,它会告诉你编译过程中哪些步骤耗时最长。

详解关于webpack多入口热加载很慢的原因

停止npm,重新运行webpack-dev-server,修改下文件按保存,观察控制台,发现总花费时长为15035毫秒,在emitting就花费了13239毫秒,这emitting应该就是指上面的图片的emitting HtmlWebpackPlugin了,看来我们解决HtmlWebpackPlugin,热加载速度就能恢复正常了。

详解关于webpack多入口热加载很慢的原因

HtmlWebpackPlugin就是我们入口对应的的html页面,new的页面越多,热加载速度就会越慢。

详解关于webpack多入口热加载很慢的原因

我尝试注释掉所有html页面,只留下一个案例详情html页面,重新启动webpack-dev-server,修改文件按下保存,发现速度惊人,只用了772毫米,看来问题出在html-webpack-plugin这个插件上。

详解关于webpack多入口热加载很慢的原因

详解关于webpack多入口热加载很慢的原因

难道是我的html-webpack-plugin配置有问题吗,于是我在网上寻找解决办法,做了各种尝试,直到我找到html-webpack-plugin的github上放弃寻找了,原来插件作者有发布几十条lssues(链接https://github.com/jantimon/html-webpack-plugin/issues),其中就包括该插件的多页面性能问题。

详解关于webpack多入口热加载很慢的原因

我尝试点进问题谈论里面看了看,里面的谈论已经不能算是怎样配置html-webpack-plugin插件了,涉及webpack底层的东西,觉得没必要去深究了,也让人不得不思考webpack现在是否适合多页面开发啊。。

总结:

1、HtmlWebpackPlugin除了正在开发的页面,其它注释掉。

2、等待插件作者修复此问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
简单的JS轮播图代码
Jul 18 Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 #Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 #Javascript
js实现全选反选不选功能代码详解
Apr 24 #Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 #Javascript
Vue源码解析之数据响应系统的使用
Apr 24 #Javascript
详解微信小程序文件下载--视频和图片
Apr 24 #Javascript
详解微信小程序之一键复制到剪切板
Apr 24 #Javascript
You might like
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
Javascript倒计时代码
2010/08/12 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
Python子类继承父类构造函数详解
2019/02/19 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
优秀求职信
2014/05/29 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
踏青活动策划方案
2014/08/19 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
Mysql基础知识点汇总
2021/05/26 MySQL
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS