Vue SSR / Episerver 解决方案中的代码拆分

Question

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

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

我的问题是； 在我们完全重建解决方案之前（为未来的无头 Epi 支持），是否有办法拆分组件并仅动态加载每次页面加载所需的组件？

根据我的理解（和我的测试），如果不使用路由，您不能将动态导入的组件与 Vue SSR 一起使用。

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

Answer 1

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