Webpack，vue.js和组件捆绑分离

Question

我们正在努力建立一个可插入的＆＃39;在客户端使用vue.js的Java webapp。

一般说明

假设我们希望在生产中没有NodeJ的情况下使用以下服务器端应用程序简化架构（并使用Java和Osgi但在我看来它并不重要，它可能是PHP，.Net或wathever ）：

• 一个主要的webapp，它在客户端公开了vuejs2，路由器和一些通用依赖项（bootstrap，jQuery等等），
• 许多webapp插件，其中包括：附加和/或可选的vue.js组件和第三方依赖项。

我们想要什么

webapp负责检查服务器端的可用webapp插件，然后在索引文件中公开相应的JS文件。例如：

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

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

约束

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

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

思路

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

感谢您的帮助。

Answer 1

您可能想尝试代码拆分：

  

代码拆分是这样一种想法，即捆绑[a .js文件并将所有Vue.js代码捆绑在一起]可以分段为较小的文件，允许用户只在需要时下载所需的代码。

     

（...）

     

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

     

（...）

     

我们需要Webpack的帮助才能动态加载[组件]。 （...）Webpack有一个[import]（[方法]的实现，并将其视为代码分割点，在创建包时将请求的模块放入单独的文件中。

来源：Code Splitting With Vue.js And Webpack，是实施代码拆分的非常有用的指南。

以下是指南的作者最终动态加载组件的main.js代码。如果我正确阅读了指南，那么注册组件的方式的这种改变是实现代码拆分所必需的唯一改变。您的Webpack配置中不需要进行任何更改。

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