程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了加载不再存在的静态资源 (ChunkLoadError)大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决加载不再存在的静态资源 (ChunkLoadError)?

开发过程中遇到加载不再存在的静态资源 (ChunkLoadError)的问题如何解决?下面主要结合日常开发的经验,给出你关于加载不再存在的静态资源 (ChunkLoadError)的解决方法建议,希望对你解决加载不再存在的静态资源 (ChunkLoadError)有所启发或帮助;

对我来说,这个问题首先在 Webpack 中表现为 ChunkLoadError。正如答案所解释的那样,它适用于在文件名中使用哈希标记资产的所有场景,甚至不特定于 Webpack。

使用 Webpack 进行代码拆分和根据需要延迟加载块。例如,假设它是一个宠物商店的应用程序。当您第一次加载站点时,它会加载主页导航所需的所有 Js。当您浏览不同的部分时,它会按需加载每个部分的代码。

因此,当您单击菜单中的“turtles”时,它会加载一个名为 turtles.abc123.Js 的文件,其中包含所有与海龟相关的代码。 (“abc123”是用于缓存管理的哈希值。)

除了在您浏览时,我们发布了一个新版本,对海龟代码进行了一些更改,将 turtles.abc123.Js 替换为 turtles.e1337b.Js。当您单击海龟部分时,它会尝试加载 turtles.abc123.Js不再存在的块,从而导致 ChunkLoadError

在我看来,解决这个问题的方法是不删除旧的块文件。只要我们乐于在每次发布时积累一组新的块文件,这就不是问题。 我们很快就会得到数百个文件。这不一定是坏事,但让它无限制地继续下去似乎是不明智的。在某些时候磁盘空间会成为一个问题。

我的下一个想法是删除超过一周的文件,因为几乎不可能有人长时间保持登录状态并退出刷新页面。

我没有看到任何关于在 Clean Plugin 或 Webpack's output.clean option 中保存文件一段时间的信息。这表明将文件保留一段时间并不是一种常见做法。

什么是常见的做法?大家是不是一般都选择不担心过时的发布问题或不担心积累文件的问题?或者还有其他我没有虑过的解决方案吗?

解决方法

我不能代表所有人,但我已经发布了一些规模合理的网络应用,可以分享我的经验和想法。

简而言之:不要删除服务器上已部署的文件,让它们堆积起来。

更长的答案:

带有散列文件名(JS、CSS、图像等)的静态构建工件通常非常小,而且空间便宜!我认为最好的权衡是让这些文件在您的服务器上累积,以防止用户运行您的应用程序的陈旧版本时出现任何问题。如果删除上一个版本,迟早会给用户带来问题,一般是不能接受的。

那么下一个问题是:我什么时候可以开始清理旧文件?我当然不会让它们无限累积,对吧?嗯,通常我认为这不是问题,但您可以每隔一段时间清理一次服务器(几个月,甚至一年一次应该没问题)。

问题在于:很难安全地自动清理旧文件。假设每次发布后,您决定自动删除超过一个月的文件,以确保“安全”。但是过了一段时间,你一个月都没有发布新版本。现在之前的版本被立即删除,让我们回到问题 #1,这可能会给最近加载应用程序的用户带来麻烦。您真的想要一种方法来说“从 ​​X 次构建之前删除文件,但至少要删除一个月前的文件”。如果没有进一步的文件标记,这是不可能自动化的。所以就我个人而言,我只是让它们在服务器上建立,如果我觉得需要,偶尔会手动清理。在这种情况下,“手动”仍然可以是一个脚本,但重点是它是手动运行的,而不是在每次发布之后

您可以想象构建一个跟踪版本并完全自动化的系统,但该系统最终会有些自以为是,这就是为什么我认为没有一种标准的方法可以让每个人都这样做。

编辑:还有一点要记住。因为文件名是散列的,如果他们不改变同一个文件可能会在很长一段时间内相关,可能是几年。这对于图像尤其常见。如果您的部署过程只上传新文件,您永远无法可靠地删除任何内容。但是,如果您始终上传最新版本中的所有文件,并在发生冲突时覆盖服务器上已有的文件,那么您可以根据需要偶尔进行清理。

大佬总结

以上是大佬教程为你收集整理的加载不再存在的静态资源 (ChunkLoadError)全部内容,希望文章能够帮你解决加载不再存在的静态资源 (ChunkLoadError)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。