typescript - webpack-dev-server 需要永远加载包

Question

webpack-dev-server重新加载 Web 应用程序大约需要一分钟。 bundle.js大约是 4mb - 我知道这很大，但它是从本地服务器加载的，不应该花那么长时间吗？这也不是重新编译的时候。这只是重新加载。因此，即使没有任何更改并且我只是在浏览器中触发刷新，一分钟就是加载捆绑包需要多长时间。



这可能是什么原因？或者这只是它通常的运作方式？如何在 webpack-dev-server 中解决此类问题？ ?我想找到瓶颈。

Answer 1

首先回答实际问题-是的 - 这就是通过 HTTP 加载该大小的文件所需的时间。我们对此无能为力。如果有人知道如何加速实际加载过程(没有缓存)，请在评论中告诉我。

TL;DR

我目前知道的唯一解决方案是缓存。但是您需要确保缓存正确的内容。

随机的东西可能会成为一个解决方案

我个人在我的设置中有两个遗漏。微不足道，但对于检查/修复绝对至关重要。

注意:以下内容仅在您进行代码拆分时才有意义 - 不更改的第三方库应与您正在处理的文件分开加载(更多内容见下文)。

我为打开的开发工具禁用了缓存。我不记得为什么我一开始就启用了该功能并且完全忘记了我所做的。所以事实证明这是一个非常糟糕的主意。确保您没有启用任何一项(确保该复选框未选中 !)。

另一个大问题是我使用的 VSCode，特别是 Chrome Debugger plugin for VSCode默认禁用缓存。因此，处于 Debug模式的 Web 应用程序突然开始缓慢加载。好消息是可以选择将其转回:disableNetworkCache (默认为真)

即使你缓存，如果你的包很大，最终缓存将失效，你将不得不等待新版本加载，除非你使用 code splitting将该捆绑包拆分为几个独立的部分，这将在不同时间失效，即使它们会失效，它们的加载速度也会比一个大转储快得多。

个人经验建议

首先，如果您由于某种原因卡在旧版 CRA 上你需要升级，基本上每隔一个月你就不会这样做，这会使升级过程变得复杂，无论如何都迫在眉睫，除非你不打算再次从事该项目。

如果您的项目已经到了升级根本不可行的阶段，因为更新的模块和插件带有可能与项目中的文件不兼容的新要求，您将不得不退出。这听起来可能很疯狂，但最终可能会比没有它的情况下减轻痛苦。