Vue.js VueJs中基于路由的WebChunk预加载

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

我已经看过

@vue/preload webpack plugin

，我可以看到我可以预加载特定的webchunk或资产。这会在所有路由上预加载这些文件

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

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

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

你知道这是怎么回事吗？有人听说过其他地方有人建议这样的项目吗

---

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

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

如果没有SSR，这将更加困难

@vue/preload webpack plugin

的工作原理是在构建时将

preload

链接注入

index.html

，并且由于整个应用程序只有一个

index.html

，因此不能使其依赖于路由（使用此插件）。因此，Vue CLI所做的是预取所有异步块（显然，速度优先于带宽使用）

---

我可以想象一个Webpack插件形式的解决方案，它取代了

preload Webpack plugin

，而不是在构建时生成预加载/预回迁链接，而是生成一些带有“route name=>chunk name”映射的内联脚本（需要一些定义良好的命名约定）这将根据当前URL动态地将链接注入DOM。但即使有我的“谷歌搜索技能”，我也找不到类似的东西……

我不知道Nuxt会这样做，所以非常有用的信息，谢谢。我一直在考虑预先申请我的申请，所以这是另一个考虑这一选择的理由。