dynamic-vendor-webpack-plugin v 1.0.0

通过动态变量和特定的代码分割来导入第三方依赖库。

前置条件

本插件依赖Webpack 4，它将随 webpack 主版本进行更新。

安装

yarn add -D dynamic-vendor-webpack-plugin
# 或
npm i --save-dev dynamic-vendor-webpack-plugin

使用

动态第三方依赖库代码分割分为两步。首先，您需要在您的 webpack 配置中设置您想要的“惰性”第三方依赖库的插件，然后再您的代码中所需的地方引入动态的导入器。

webpack.config.ts

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

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

index.ts

// 取回您的第三方依赖库的数组
// 该模块不是默认加载的，而是包裹在一个纯函数中。
import { dynamicImporter } from 'dynamic-vendor-webpack-plugin/dynamicImporter';

(async () => {
    // 通过它来运行
    for (const fn of dynamicImporter) {
        // 使用该方法获取模块
        const m = await fn(); 

        // 使用
        new (m.default)();
    }
})();

这将生成一个带有该第三方依赖库(及其独有的依赖)的独立的块，应用将按需加载。

配置项

• options.vendors: Array<string | VendorEntry>：第三方依赖库的列表，包括库的名称和一个带有细节信息的对象。
  • options.vendors[].name: string：依赖库的名称。
  • options.vendors[].magicComment: WebpackMagicComment：webpack 魔法注释所导入的配置列表。(参见：这里)
• options.webpackChunkName: string：动态第三方库代码块的名称。默认是："dynamic-vendor"，您可以使用一个 vendor 对象自动地覆盖每个依赖库。

有条件的第三方库

webpack.config.ts

const DEV = process.env.NODE_ENV === 'development';
{
    mode: DEV ? 'development' : 'production',
    plugins: [
        new DynamicVendorPlugin({
            vendors: [
                {
                    name: DEV ? 'mock-service-lib' : 'service-lib',
                },
            ],
        }),
    ],
}

将类似的特定第三方库组合在一起(例如，插件):

webpack.config.ts

import packageJson from './package.json';

{
    plugins: [
        new DynamicVendorPlugin({
            // 您想要在一个特定的模式下懒盲加载所有第三方依赖库，在这个例子中是'@mylib/*'
            vendors: Object.keys(packageJson.dependencies).filter(d => d.startsWith('@mylib/')),
        }),
    ],
}