Webpack, vue.js and component bundles separation - node.js

Question

We are trying to build a 'pluginisable' Java webapp which use vue.js on client-side.
General description
Let say we want to get the following server-side application simplified architecture without NodeJs in production (and using Java and Osgi but it doesn't really matter here in my opinion, it may be PHP, .Net or wathever) :
A main webapp which exposes, among others : vuejs2, router and some general dependencies (bootstrap, jQuery etc...) on the client-side,
Many webapp plugins which expose, among others : additional and/or optional vue.js components and third party dependencies.
What we want
The webapp does the work to check for available webapp plugins on server-side and then expose the appropriate JS files in the index file. For example :
app.js : the main webapp loader and general dependencies,
pluginA.js : the vue.js components provided by the server-side plugin "A",
pluginB.js : the vue.js components provided by the server-side plugin "B".
The entire webapp is not build through nodejs but each of the 3 examples are built separately using node and webpack.
Constraints
How can we achieve a build process for the plugins following these constraints :
we want to avoid the javascript build process to have to conciliate all parts of the application at the same time : Checked, we have 1 embedded vue app per webapp plugin, Maven runs the node build process for each webapp plugin and the server-side already does the job to expose all of the 3 files separately,
the plugin JS files only contain the built vue components and 3rd-party dependencies that they want to provide : Not checked, all of the 3 output folders contains all the JS dependencies.
Line of thought
For each webapp plugin, we think we need to find a way to build all .vue files of a webapp plugin and exclude all other dependencies from the output file. As we are new to the node and vuejs world, how could we achieve this ?
Thanks for your help.

Answer 1

You may want to try code splitting:
Code splitting is the idea that a bundle [a .js file with all your Vue.js code bundled together] can be fragmented into smaller files allowing the user to only download what code they need, when they need it.
(...)
The key to code splitting a Vue.js app is async components. These are components where the component definition (including its template, data, methods etc) is loaded asynchronously.
(...)
We’ll need Webpack’s help to dynamically load [components]. (...) Webpack has an implementation [of an] import() [method] and treats it as a code split point, putting the requested module into a separate file when the bundle is created.
Source: Code Splitting With Vue.js And Webpack, a very helpful guide for implementing code splitting.
Below is the main.js code that the author of the guide ends up with to dynamically load a component. If I read the guide correctly, this change in the way you register a component is the only change necessary to implement code splitting. No changes are necessary in your Webpack config.
new Vue({
el: '#app',
components: {
ExampleAsyncComponent: () => import('./ExampleAsyncComponent.vue') /* This is the changed part. */
}
});