Skip to content

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

License

Notifications You must be signed in to change notification settings

lsagetlethias/dynamic-vendor-webpack-plugin

Repository files navigation


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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published