This is a webpack plugin that gives you a way to import vendors with dynamic variable and specific code splitting.
dynamic-vendor-webpack-plugin relies on webpack 4. It will be updated as needed on major updates of webpack.
yarn add -D dynamic-vendor-webpack-plugin# ornpm i --save-dev dynamic-vendor-webpack-plugin
Dynamic vendor code splitting is a two steps code process. First, you need to setup the plugin in your
webpack config with desired "lazy" vendors, then import the dynamic importer wherever you need in your code.
FYI, the following examples are based on a Typescript code based application.
// fetch the array of your vendors// the module is not load by default but wrapped in a pure function;;
This will generate a separated chunk with this vendor (and its exclusive dependencies) loaded on demand by you application.
options.vendors: Array<string | VendorEntry>: The list of vendors by their name of by a more detailed object.
options.vendors.name: string: The name of the vendor (dependecy name).
options.vendors.magicComment: WebpackMagicComment: List of webpack magic comment import configuration. (see https://webpack.js.org/api/module-methods/#import- )
options.webpackChunkName: string: A name for the dynamic vendor chunk.
'dynamic-vendor'by default, you can atomically override this for each vendors with a vendor object.
Group similar specific vendor together (i.e. plugins)