版权声明:本文为博主原创文章,遵循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配置修改如下:

  1. 在项目配置文件index.js中新建以下目录,包含项目所有入口的名称:

  1. 在动态读取入口文件的工具函数中,增加过滤条件,过滤掉不需要放入buildList中的模块,这样,工具函数只会读取在buildList中需要加载的模块,这样,webpack就实现了按需编译和加载,更新效率会得到提升。

以下是配置代码:

四、使用方法

开发过程中只需在index.js中注释掉不需要调试的模块 。

如下,只调试Test1模块,只将该模块加入buildList,其余模块注释即可:

五、注意事项

Index.js仅供调试过程中个人使用,修改后不要上传SVN

六、测试结果

修改前:

Npm run dev 起项目耗时2分多钟

修改后:

Npm run dev 调试一个页面起项目耗时仅9秒

再也不用为改代码保存一下要等2分钟才能看到效果而烦恼了。

完美解决Webpack多页面热加载缓慢问题【转载】的更多相关文章

  1. vue页面首次加载缓慢原因及解决方案

    第一次打包vue的项目部署到服务器下时,发现初次加载特别的缓慢,将近20s页面才加载出来,完全没有开发环境上的那么流畅.主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大,一次想要全部加载 ...

  2. vue 页面首次加载缓慢原因及解决方案

    第一次打包vue的项目部署到服务器,发现首次加载特别的缓慢要几十秒才加载出来,完全没有在本地开发环境上那么流畅. 主要原因是页面在打包后没有进行相关的配置导致资源文件特别大,一次想要全部加载完成回特别 ...

  3. 【Untiy】完美解决Untiy Package Manager无限加载的问题

    直接上干货 打开记事本,复制一下zhei个 @echo offset HTTP_PROXY=127.0.0.1set HTTPS_PROXY=127.0.0.1start "" & ...

  4. Webpack热加载和React(其中有关于include和exclude的路径问题)

    看了几个React配合webpack的教程,大部分都因为版本问题过时了.终于找到了一个不错的教程.记录下其中的知识点. 首先万分感谢这个教程的制作者.少走了许多弯路,正在学习webpack的小伙伴可以 ...

  5. SpringBoot+gradle+idea实现热部署和热加载

    前言 因为之前使用myeclipes的同学就知道,在使用myeclipes的时候,java文件或者jsp文件写完之后会被直接热加载到部署的容器中,从而在开发的时候,不同经常去重启项目,从而达到了增加开 ...

  6. vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案

    # vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案 最近做项目发现一个问题,页面每次刷新后加载速度都非常慢,20s左右,在开发环境则非常流畅,几乎感觉不到,本文参考望山的各种方案优化 1,关闭打 ...

  7. solr6.4.1搜索引擎(4)tomcat重启后数据加载缓慢或丢失

    解决tomcat重启后数据加载缓慢或丢失 我们在首次全量导入和第二次增量导入数据都成功后,在研究solr过程中,会反复重启tomcat. 我们会发现在重启tomcat后,core的data目录下明明已 ...

  8. 如何通过webpack和node来实现多个静态页面html,多个入口,能打包能热加载开发环境调试

    demo已经传到了github,地址:https://github.com/13476075014/04.node-vue-project/tree/master/03.singlewebpack: ...

  9. 使用webpack热加载,开发多页面web应用

    我们一般使用webpack热加载开发SPA应用,但工作中难免会遇到一些多页面的demo或项目. 故参考 kingvid-chan 的代码,搭了一个使用HRM开发多页面web应用的脚手架,刚好也进一步学 ...

随机推荐

  1. spring mvc 的@PathVariable对应中文乱码解决办法

    参考:https://www.aliyun.com/jiaocheng/800577.html

  2. P1064 朋友数

    P1064 朋友数 转跳点:

  3. chart 模板【转】

    Helm 通过模板创建 Kubernetes 能够理解的 YAML 格式的资源配置文件,我们将通过例子来学习如何使用模板. 以 templates/secrets.yaml 为例: 从结构看,文件的内 ...

  4. python format使用方法

    #使用format 方法进行格式化 print("The number {1:} in hex is: {1:#x}, the number {0:} in oct is {0:o}&quo ...

  5. [笔记]ul>li>a做分布时, 让其居中显示效果

    结构: <div id="page"> <ul> <li><a href="#">首页</a>< ...

  6. gem5-gpu 选项解释

    ‘--split’ ,该项用于模拟独立显卡,GPU与CPU不在同一芯片上,两者的内存物理上隔绝,使用PCI-Express连接. ‘--access-host-pagetable’,该项用于模拟集成显 ...

  7. 打开exe并传参

    shellexecute(Application.Handle,'open',PWideChar('E:\控件\TMS.Scripter.Studio.Pro..6.0.2.0.Delphi.BCB. ...

  8. Phoenix5.0的部署

    官网下载编译好的二进制包 http://phoenix.apache.org/download.html2 上传并解压到指定目录, 再修改目录名称 tar -zxvf apache-phoenix-5 ...

  9. Netty 模型

    Demo代码 使用Maven的话请在pom.xml中注入netty依赖 <!-- https://mvnrepository.com/artifact/io.netty/netty-all -- ...

  10. 在ubuntu中使用ipython

    python自带的shell实在是不怎么好用 大家可以用一下ipython这个软件,它可以自动缩进,补齐,语法高亮等 安装办法: sudo apt install ipython #这个是安装2.7的 ...