Question

在使用Vue CLI创建的Vue.js项目（内部使用webpack）中，我通过动态导入实现代码拆分和延迟加载，如下所示：

import(/* webpackChunkName: "my-feature" */ "./my-feature.js");

结果，我得到了预期的文件集：

dist / myApp.umd.min.js
dist / myApp.umd.min.vendors〜my-feature.js（我的功能依赖项）
dist / myApp.umd.min.my-feature.js

Vue应用程序被构建为一个库，然后用于现有的网站。我要做的是在{head>中包含myApp.umd.min.js（在所有页面中通用），然后在请求代码中添加该页面所需的代码（例如myApp.umd.min.my-feature.js）。先前的脚本会自动请求依赖项（myApp.umd.min.vendors~my-feature.js。

问题

当我导航到使用Vue应用程序（特别是我的功能）的页面时，上述所有3个文件均已加载。第一次访问是可以预期的，但是如果我移到另一个页面然后返回，则只会从缓存中加载第一个文件（myApp.umd.min.js）。每次我访问该页面时，其他文件都会从服务器加载。

对于延迟加载的脚本，一旦加载后从缓存中采取什么方法？谢谢！

Answer 1

到目前为止，除了在页面的<head>部分中包含所有脚本之外，我发现没有什么比这更好的了。此外，仅使用<script>标记有帮助； <link href="..." rel="preload" as="script">没用。

Answer 2

使用版本参数作为脚本URL。

有一个代码片段展示了这一点：

<script type="text/javascript" src="myApp.umd.min.js?v=123"></script>

这也是一个有效的解决方案：

<link rel="preload" href="myFont.woff2" as="font"
      type="font/woff2" crossorigin="anonymous">

来自文档：

预加载的rel值表示浏览器应使用as属性预加载此资源，该属性指示要获取的特定内容类别。 crossorigin属性指示是否应通过CORS请求来获取资源。

延迟加载资源的缓存未命中（使用动态导入）

2 个答案: