vue.js - Vue SSR/Episerver 解决方案中的代码拆分

Question

由于各种原因，我们有一个相当特殊的解决方案，其中包含一个与 Vue SSR 前端捆绑在一起的 EPI 后端。前端 nodejs 服务器仅提供 SSR，不用作网络服务器。这意味着不使用前端路由，并且会为每次页面加载重新加载和设置页面。

到目前为止，所有组件(例如一百个 epi block 和页面)都在全局范围内注册，因为我们不知道何时何地需要它们。这当然会创建一个不必要的大型 js 包，其中 90% 的代码从未使用过。

我的问题是；在我们完全重建解决方案(为了 future 的无外设 EPI 支持)之前，是否有一种方法可以拆分组件并仅动态加载每次页面加载所需的组件？

根据我的理解(以及我的测试)，如果不使用路由，你不能将动态导入的组件与 Vue SSR 一起使用。

例如，我希望每个组件都是一个单独的文件，这样它们就可以被缓存并保持初始页面加载更小。或者如果有人有更好的建议 =)

Answer 1

我们做了一些与网络包捆绑类似的事情。我们读取内容区域内的 block ，然后使用 webpack-import-glob-loader 捆绑并加载 block 和 terser-webpack-plugin .