[Vuejs]-Webpack add Lazy Loaded chunks after build

by

0👍

I don’t have experience with Vue, we have done a similar implementation using React. But the approach we followed used basic JS features only, so hopefully you should be able to do something similar. First we defined the plugin as an external dependency in the plugin loader code, so it can use the plugin methods without having it as part of the webpack package. Then every plugin is a separate webpack project which exports with this library config –

output: {
   library:["registeredPlugins", "[name]"],
   libraryTarget:"umd" // or "var"
}

This creates var window.registeredPlugins.somePlugin = {...} exports in the generated script.

Next, we use the ScriptJS loader in the plugin loader code to load a plugin at run-time from its URL. We ensure every plugin has a unique name so they don’t overwrite each other.

Hope this helps.

Leave a comment