在 VueJs 中基于路由预加载 webchunk

Question

当我构建我的 VueJs 应用程序时，它会自动导入带有 preload 属性的 app.js 和 chunk-vendor.js 文件。这很棒，因为它加快了我的应用程序的页面加载时间。

我查看了@vue/preload-webpack-plugin，我可以看到我可以预加载特定的网络块或资产。这具有在所有路由上预加载这些文件的效果。

我真正想做的是根据加载的初始路由（用户访问的第一条路由）预加载 webchunks。

假设我有两条路线；家和账户。这两条路线都是延迟加载的。当用户打开 /home 作为他们的第一页时，我想预加载与主页相关的 js 和 css webchunk。如果用户最初打开 /accounts 页面，我想预加载与帐户页面相关的 webchunk。

不可能在预加载语句中使用通配符，所以我知道我不能静态地这样做。

有什么想法可以这样工作吗？有没有人听说过其他地方有人建议过这样的项目？

编辑：作为实验，我尝试使用 beforeRouteEnter 方法将预加载标头注入我的 index.html 文件。虽然我可以在我的 DOM 中看到预加载标头，但我发现浏览器没有及时观察到标头，因此我正在试验的图像没有预加载。无论如何，这对于动态命名的文件来说是行不通的，但知道它很有用。

Answer 1

使用 SSR 是可能的，像 Nuxt 这样的框架会自动完成，因为它为每个路由构建单独的 html 文件。所以这个 html 可以为这个特定的路由“定制”，并包含/预加载所有需要的代码路由......

如果没有 SSR，那就更难了。 @vue/preload-webpack-plugin 通过在构建时将preload 链接注入index.html 来工作，并且由于整个应用程序只有一个index.html，因此您不能使其依赖于路由（使用此插件）。所以 Vue CLI 所做的是预取所有异步块 by default（显然更喜欢速度而不是带宽使用）

我可以想象一个 Webpack 插件形式的解决方案，它替换 preload-webpack-plugin，而不是在构建时生成预加载/预取链接，而是生成一些带有“路由名称 => 块名称”映射的内联脚本（一些需要明确定义的命名约定），它将基于当前 URL 动态地将链接注入到 DOM。但即使以我的“谷歌搜索技能”，我也找不到类似的东西......