完美解决Webpack多页面热加载缓慢问题【转载】
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。
Webpack多页面热加载缓慢问题分析与解决
一、问题引入
使用webpack + vue多入口模式后,随着项目模块越来越多,整个项目的入口多达30多个,热更新变得缓慢,保存一次等待热加载的时间多达2-3分钟,这也意味着,改一下代码保存后要等2分多钟才能看到效果,非常影响开发效率。
二、问题分析
我们的代码无问题,而是html-webpack-plugin插件存在性能问题
论证:
html-webpack-plugin的github上,插件作者有发布几十条lssues(链接https://github.com/jantimon/html-webpack-plugin/issues),其中就包括该插件的多页面性能问题,下图是github上的部分issues:
三、解决方案
我们改变不了插件本身,但是可以考虑开发环境中按需加载和热更新。
将webpack配置修改如下:
- 在项目配置文件index.js中新建以下目录,包含项目所有入口的名称:
- 在动态读取入口文件的工具函数中,增加过滤条件,过滤掉不需要放入buildList中的模块,这样,工具函数只会读取在buildList中需要加载的模块,这样,webpack就实现了按需编译和加载,更新效率会得到提升。
以下是配置代码:
四、使用方法
开发过程中只需在index.js中注释掉不需要调试的模块 。
如下,只调试Test1模块,只将该模块加入buildList,其余模块注释即可:
五、注意事项
Index.js仅供调试过程中个人使用,修改后不要上传SVN
六、测试结果
修改前:
Npm run dev 起项目耗时2分多钟
修改后:
Npm run dev 调试一个页面起项目耗时仅9秒
再也不用为改代码保存一下要等2分钟才能看到效果而烦恼了。
完美解决Webpack多页面热加载缓慢问题【转载】的更多相关文章
- vue页面首次加载缓慢原因及解决方案
第一次打包vue的项目部署到服务器下时,发现初次加载特别的缓慢,将近20s页面才加载出来,完全没有开发环境上的那么流畅.主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大,一次想要全部加载 ...
- vue 页面首次加载缓慢原因及解决方案
第一次打包vue的项目部署到服务器,发现首次加载特别的缓慢要几十秒才加载出来,完全没有在本地开发环境上那么流畅. 主要原因是页面在打包后没有进行相关的配置导致资源文件特别大,一次想要全部加载完成回特别 ...
- 【Untiy】完美解决Untiy Package Manager无限加载的问题
直接上干货 打开记事本,复制一下zhei个 @echo offset HTTP_PROXY=127.0.0.1set HTTPS_PROXY=127.0.0.1start "" & ...
- Webpack热加载和React(其中有关于include和exclude的路径问题)
看了几个React配合webpack的教程,大部分都因为版本问题过时了.终于找到了一个不错的教程.记录下其中的知识点. 首先万分感谢这个教程的制作者.少走了许多弯路,正在学习webpack的小伙伴可以 ...
- SpringBoot+gradle+idea实现热部署和热加载
前言 因为之前使用myeclipes的同学就知道,在使用myeclipes的时候,java文件或者jsp文件写完之后会被直接热加载到部署的容器中,从而在开发的时候,不同经常去重启项目,从而达到了增加开 ...
- vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案
# vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案 最近做项目发现一个问题,页面每次刷新后加载速度都非常慢,20s左右,在开发环境则非常流畅,几乎感觉不到,本文参考望山的各种方案优化 1,关闭打 ...
- solr6.4.1搜索引擎(4)tomcat重启后数据加载缓慢或丢失
解决tomcat重启后数据加载缓慢或丢失 我们在首次全量导入和第二次增量导入数据都成功后,在研究solr过程中,会反复重启tomcat. 我们会发现在重启tomcat后,core的data目录下明明已 ...
- 如何通过webpack和node来实现多个静态页面html,多个入口,能打包能热加载开发环境调试
demo已经传到了github,地址:https://github.com/13476075014/04.node-vue-project/tree/master/03.singlewebpack: ...
- 使用webpack热加载,开发多页面web应用
我们一般使用webpack热加载开发SPA应用,但工作中难免会遇到一些多页面的demo或项目. 故参考 kingvid-chan 的代码,搭了一个使用HRM开发多页面web应用的脚手架,刚好也进一步学 ...
随机推荐
- linux下解决git clone太慢
此教程同样也适用与vscode下载太慢的问题 git和vscode会自动使用http_proxy,https_proxy环境变量的代理,所以我们只需要设置这个环境变量即可 前提 需要一个可用的代理,这 ...
- Mozilla Firefox 68 正式发布下载:对刚Chrome
Mozilla Firefox 68开源和跨平台Web浏览器现在正式发布,可以下载适用于GNU/Linux,Mac和Windows平台的Firefox 68了. Firefox 68网络浏览器现在可以 ...
- DBlink查看,创建于删除
1.查看dblink select owner,object_name from dba_objects where object_type='DATABASE LINK'; 或者 select * ...
- shell-Startup-Files
shell-Startup-Files 1. 相关阅读 2. 主流shell 3. shell实例类型 4. Shell启动文件的必要元素 4.1 路径: 命令路径, 4.2 提示符 5. 主流she ...
- 015、Java中定义变量时不设置内容,使用变量前设置内容
01.代码如下 package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- Linux每日练习-awk命令之内部自定义函数 20200224
- TextView标签的属性和跑马灯效果
text:显示的内容 textSize:文本的大小 textColor:文本的颜色 visibility:可见性 默认可见,invisible:表示不可见,但对控件的显示区域做了保留 gone:隐藏 ...
- HDU - 1864 最大报销额 (01背包)
题意:现有一笔经费可以报销一定额度的发票.允许报销的发票类型包括买图书(A类).文具(B类).差旅(C类),要求每张发票的总额不得超过1000元,每张发票上,单项物品的价值不得超过600元.现请你编写 ...
- Oracle 查询当前用户下的所有表
select table_name from user_tables;
- 081-PHP的do-while循环
<?php $i = 1; do { echo $i; $i = $i +1; } while ($i <= 8); ?>