首页 文章

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

提问于
浏览
1

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

一般说明

假设我们希望在 生产环境 中没有NodeJ的情况下使用以下服务器端应用程序简化架构(并且使用Java和Osgi,但在我看来这并不重要,可能是PHP,.Net或wathever):

  • 一个主要的webapp,在客户端公开,其中包括:vuejs2,路由器和一些通用依赖项(bootstrap,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构建过程必须同时调解应用程序的所有部分: Checked ,我们每个webapp插件有1个嵌入式vue应用程序,Maven为每个webapp插件和服务器端运行节点构建过程已经完成了分别公开所有3个文件的工作,

  • 插件JS文件只包含他们想要提供的内置vue组件和第三方依赖项: Not checked ,所有3个输出文件夹都包含所有JS依赖项 .

思路

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

谢谢你的帮助 .

1 回答

  • 1

    您可能想尝试代码拆分:

    代码拆分是这样一种想法,即捆绑[一个捆绑在一起的所有Vue.js代码的.js文件]可以分割成更小的文件,允许用户在需要时只下载他们需要的代码 . (...)代码拆分Vue.js应用程序的关键是异步组件 . 这些是组件定义(包括其模板,数据,方法等)异步加载的组件 . (...)我们需要Webpack的帮助才能动态加载[components] . (...)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. */
      }
    });
    

相关问题