dynamic-vendor-webpack-plugin
This is a webpack plugin that gives you a way to import vendors with dynamic variable and specific code splitting.
Requirements
dynamic-vendor-webpack-plugin
relies on webpack 4. It will be updated as needed on major updates of webpack.
Install
yarn add -D dynamic-vendor-webpack-plugin# or npm i --save-dev dynamic-vendor-webpack-plugin
Usage
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.
webpack.config.t-s
;; ;
index.ts
// 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
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.
Conditional vendor
webpack.config.ts
;
Group similar specific vendor together (i.e. plugins)
webpack.config.ts
;
Maintainers
Lilian Saget-Lethias |