详解关于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 textarea的长度进行验证
May 06 Javascript
原创javascript小游戏实现代码
Aug 19 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
EasyUi datagrid 实现表格分页
Feb 10 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 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 使用memcached简单示例分享
2015/03/05 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
python机器学习之贝叶斯分类
2018/03/26 Python
Django model update的多种用法介绍
2020/03/28 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
物流专业大学生求职信范文
2013/10/28 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
实习指导教师评语
2014/12/30 职场文书
大学生活感想
2015/08/10 职场文书
入党心得体会
2019/06/20 职场文书
如何撰写创业策划书
2019/06/27 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
Java实现房屋出租系统详解
2021/10/05 Java/Android
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android