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

import { DynamicVendorPlugin } from 'dynamic-vendor-webpack-plugin';
import { Configuration } from 'webpack';

const config: Configuration = {
    // ... your webpack configuration
    plugins: [
        new DynamicVendorPlugin({
            vendors: ['my-vendor'],
        }),
    ],
}
export default config;

index.ts

// fetch the array of your vendors
// the module is not load by default but wrapped in a pure function
import { dynamicImporter } from 'dynamic-vendor-webpack-plugin/dynamicImporter';

(async () => {
    // run through it
    for (const fn of dynamicImporter) {
        // get the module with the function
        const m = await fn(); 

        // use it
        new (m.default)();
    }
})();

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

const DEV = process.env.NODE_ENV === 'development';
{
    mode: DEV ? 'development' : 'production',
    plugins: [
        new DynamicVendorPlugin({
            vendors: [
                {
                    // admiting that you have a services third party library
                    name: DEV ? 'mock-service-lib' : 'service-lib',
                },
            ],
        }),
    ],
}

Group similar specific vendor together (i.e. plugins)

webpack.config.ts

import packageJson from './package.json';

{
    plugins: [
        new DynamicVendorPlugin({
            // admiting that you want to lazy blind load all vendors under a specific pattern
            // in this case '@mylib/*'
            vendors: Object.keys(packageJson.dependencies).filter(d => d.startsWith('@mylib/')),
        }),
    ],
}

Maintainers

Lilian Saget-Lethias