我们正在尝试构建一个“可插入的”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 回答
您可能想尝试代码拆分:
来源:Code Splitting With Vue.js And Webpack,一个非常有用的指南,用于实现代码分割 .
下面是指南的作者最终动态加载组件的
main.js
代码 . 如果我正确阅读了指南,那么注册组件的方式的这种改变是实现代码拆分所必需的唯一改变 . 您的Webpack配置中不需要进行任何更改 .