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

标签 vue.js vuejs2 server-side-rendering episerver dynamic-import

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

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

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

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

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

最佳答案

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

关于vue.js - Vue SSR/Episerver 解决方案中的代码拆分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66850060/

相关文章:

javascript - 使用 v-if 隐藏后,文件输入不会显示文件名

node.js - 无法为 Vue Webpack 构建的应用程序加载工作脚本

webpack - 在子目录中部署 VueJS App

javascript - 如何对 Vuetify 日期范围选择器进行排序?

javascript - Next.js 持久组件 - 即使在更改页面后也能播放的 Youtube 嵌入

vuejs2 - Nuxt 自定义模块 Hook 未调用

vue.js - 可能可以使用 `--fix` 选项修复

Vue.js 从方法访问变量

javascript - 如何在 v-time-picker 中禁用选择分钟?

javascript - Next.js 为 _app.js 中的特定页面选择退出布局组件