详解关于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动态添加删除一行数据示例
Jun 12 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
微信小程序实现的一键连接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中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
thinkPHP查询方式小结
2016/01/09 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
Django框架模板的使用方法示例
2019/05/25 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
python中pop()函数的语法与实例
2020/12/01 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
公司财务总监岗位职责
2013/12/14 职场文书
离婚财产分配协议书
2014/10/21 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python