dvw
dynamic-vendor-webpack-plugin
npm i dynamic-vendor-webpack-plugin
dvw

dynamic-vendor-webpack-plugin

A Webpack plugin that gives you a way to import vendors with dynamic variable and specific code splitting

by Lilian Saget-Lethias

1.0.0 (see all)License:MITTypeScript:Built-In
npm i dynamic-vendor-webpack-plugin
Readme

npm

deps node


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.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
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate