Webpack、vue.js 和组件包分离

Question

我们正在尝试构建一个在客户端使用 vue.js 的“可插件化”Java webapp。

一般说明

假设我们想要在生产环境中不使用 NodeJs 来获得以下服务器端应用程序简化架构（并且使用 Java 和 Osgi，但在我看来这并不重要，它可能是 PHP、.Net 或 wathever）：

• 一个主要的 web 应用程序，其中包括：vuejs2、路由器和客户端上的一些一般依赖项（引导程序、jQuery 等），
• 许多 webapp 插件公开，其中包括：附加和/或可选的 vue.js 组件和第三方依赖项。

我们想要什么

webapp 会在服务器端检查可用的 webapp 插件，然后在索引文件中公开适当的 JS 文件。例如：

• app.js：主要的 webapp 加载器和一般依赖项，
• pluginA.js：服务端插件“A”提供的vue.js组件，
• pluginB.js : 服务端插件“B”提供的 vue.js 组件。

整个 webapp 不是通过 nodejs 构建的，但 3 个示例中的每一个都是使用 node 和 webpack 分别构建的。

约束

我们如何在这些约束下实现插件的构建过程：

• 我们希望避免 javascript 构建过程必须同时协调应用程序的所有部分：选中，我们每个 webapp 插件有 1 个嵌入式 vue 应用程序，Maven 运行节点构建过程对于每个 webapp 插件，服务器端已经完成了分别公开所有 3 个文件的工作，
• 插件 JS 文件只包含他们想要提供的构建的 vue 组件和 3rd-party 依赖项：未选中，所有 3 个输出文件夹都包含所有 JS 依赖项。

思路

对于每个 webapp 插件，我们认为我们需要找到一种方法来构建 webapp 插件的所有 .vue 文件，并从输出文件中排除所有其他依赖项。由于我们是 node 和 vuejs 世界的新手，我们如何才能做到这一点？

感谢您的帮助。

Answer 1

您可能想尝试代码拆分：

代码拆分是这样一种想法，即捆绑包 [将所有 Vue.js 代码捆绑在一起的 .js 文件] 可以分割成更小的文件，从而允许用户仅在需要时下载他们需要的代码。

(...)

代码拆分 Vue.js 应用程序的关键是异步组件。这些是组件定义（包括其模板、数据、方法等）异步加载的组件。

(...)

我们需要 Webpack 的帮助来动态加载 [组件]。 (...) Webpack 有一个 [of an] import() [method] 的实现，并将其视为代码拆分点，在创建包时将请求的模块放入单独的文件中。

来源：Code Splitting With Vue.js And Webpack，对实现代码拆分很有帮助。

下面是指南作者最终用来动态加载组件的main.js 代码。如果我正确阅读了指南，注册组件方式的这种更改是实现代码拆分所需的唯一更改。您的 Webpack 配置无需更改。

new Vue({ 
  el: '#app',
  components: {
    ExampleAsyncComponent: () => import('./ExampleAsyncComponent.vue') /* This is the changed part. */
  }
});