Положение использования webpack dllplugin

внешний интерфейс Webpack

В предыдущей компании я в основном отвечал за внутренний бизнес системы.Из-за избыточного бизнес-кода я пытался использовать dll-плагин webpack.Из-за задержки бизнес-направления у меня не было времени чтобы оптимизировать его. Сегодня у меня есть время, чтобы реорганизовать и организовать его. Поделитесь с вами, правильная поза webpack dllplugin

часть I: Настройка webpack dllplugin

  1. Настройте файл конфигурации веб-пакета для создания библиотек динамической компоновки. Например, мы назвали его webpack.dll.config.js.
const rootPath = path.resolve(__dirname, '../');
const isPro = process.env.NODE_ENV === 'production';

module.exports = {
    entry:  {
        vendor: ['react', 'react-dom']
    },
    output: {
        path: path.join(rootPath, 'dist/site'),
        filename: 'dll_[name].js',
        library: "[name]_[hash]"
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(rootPath, "dist/site", "[name]-manifest.json"),
            name: "[name]_[hash]"
        })
    ]
}

Имя файла в выводе здесь — это имя сгенерированного файла, который является dll_vendor.js, а библиотека — это имя глобальной переменной модуля, выводимой динамической библиотекой. Обратите внимание, что эта библиотека должна точно совпадать с именем в конфигурации webpack.DllPlugin. Зачем? Взгляните на сгенерированный файл манифеста и файл dll_vendor, чтобы понять.

Файл dll_vendor.js выглядит следующим образом: (здесь для наглядности, без сжатия)

var vendor_868ab5aa63db7c7c0a32 =
/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

Обратите внимание на роль библиотеки, см.Официальный сайт. Когда библиотека настроена, файлы в указанном выше формате будут генерироваться по умолчанию.
Файл vendor-manifest.json выглядит следующим образом:

{"name":"vendor_868ab5aa63db7c7c0a32","content":{"./node_modules/process/browser.js":{"id":0,"meta":{}},

Другими словами, здесь есть соответствующая связь, которую можно найти только в том случае, если имя в файле манифеста поставщика соответствует реальной переменной.

  1. Используйте библиотеку динамической компоновки, золотой партнер DllReferencePlugin.
new DllReferencePlugin({
  // 描述 react 动态链接库的文件内容
  manifest: require('../dist/site/vendor-manifest.json'),
})
  1. Справочные материалы.
    Этот шаг часто забывают. Обязательно вручную импортируйте файл dll_vendor.js в html-файл шаблона HtmlWebpackPlugin.
<body>
    <div id="app"></div>
    <script src="./dll_vendor.js"></script>
</body>

После вышеуказанных трех шагов все готово. И официальная сборка среды, и webpack-dev-server могут ссылаться на файлы dll.

часть II: Простой анализ исходного кода

Вот действительно простой анализ, не вдаваясь в глубокое обсуждение, продолжение выведет серию статей о вебпаке, а затем подробно обсудит детали реализации каждого плагина.

Очевидно, что задействованы только webpackDllPlugin и webpackReferencePlugin, поэтому объектами исследования этой части являются эти два.

  1. плагин webpackDll.
    Во-первых, мы уже знаем, что роль webpackDllPlugin состоит в том, чтобы делать две маленькие вещи: генерировать файл поставщика в соответствии с записью и генерировать файл manifest.json.
/*
    MIT License http://www.opensource.org/licenses/mit-license.php
    Author Tobias Koppers @sokra
    */
"use strict";

const DllEntryPlugin = require("./DllEntryPlugin");
const LibManifestPlugin = require("./LibManifestPlugin");
const FlagInitialModulesAsUsedPlugin = require("./FlagInitialModulesAsUsedPlugin");

class DllPlugin {
    constructor(options) {
        this.options = options;
    }

    apply(compiler) {
        compiler.plugin("entry-option", (context, entry) => {
            function itemToPlugin(item, name) {
                if(Array.isArray(item))
                    return new DllEntryPlugin(context, item, name);
                else
                    throw new Error("DllPlugin: supply an Array as entry");
            }
            if(typeof entry === "object" && !Array.isArray(entry)) {
                Object.keys(entry).forEach(name => {
                    compiler.apply(itemToPlugin(entry[name], name));
                });
            } else {
                compiler.apply(itemToPlugin(entry, "main"));
            }
            return true;
        });

        compiler.apply(new LibManifestPlugin(this.options));
        compiler.apply(new FlagInitialModulesAsUsedPlugin());
    }
}

module.exports = DllPlugin;

LibManifestPlugin используется для создания соответствующего файла manifest.json.

  1. webpackReferencePlugin.

Фрагмент исходного кода выглядит следующим образом, я добавил два основных комментария:

compiler.plugin("before-compile", (params, callback) => {
    const manifest = this.options.manifest;
    if(typeof manifest === "string") {
        // 将manifest加入到依赖dependency中
        params.compilationDependencies.push(manifest);
        // 读取manifest.json的内容
        compiler.inputFileSystem.readFile(manifest, function(err, result) {
            if(err) return callback(err);
            params["dll reference " + manifest] = JSON.parse(result.toString("utf-8"));
            return callback();
        });
    } else {
        return callback();
    }
});

compiler.plugin("compile", (params) => {
    let manifest = this.options.manifest;
    if(typeof manifest === "string") {
        manifest = params["dll reference " + manifest];
    }
    const name = this.options.name || manifest.name;
    const sourceType = this.options.sourceType || (manifest && manifest.type) || "var";
    const externals = {};
    const source = "dll-reference " + name;
    externals[source] = name;
    //将manifest的文件依赖，以external形式打包（external是作为外部依赖，不进行pack的）
    params.normalModuleFactory.apply(new ExternalModuleFactoryPlugin(sourceType, externals));
    params.normalModuleFactory.apply(new DelegatedModuleFactoryPlugin({
        source: source,
        type: this.options.type,
        scope: this.options.scope,
        context: this.options.context || compiler.options.context,
        content: this.options.content || manifest.content,
        extensions: this.options.extensions
    }));
});

Часть III. Подведение итогов оптимизации веб-пакета DllPlugin, который используется для извлечения основных модулей (сторонних модулей), от которых зависит проект, а затем их упаковки в отдельные библиотеки динамической компоновки. При следующей упаковке, через webpackReferencePlugin, если импортируемый модуль будет обнаружен в динамической библиотеке в процессе упаковки, он не может быть запакован повторно, а получен из динамической библиотеки.

Категории