DllPlugin для повышения скорости компиляции webpack

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

Введение

The DllPlugin and DllReferencePlugin provide means to split bundles in a way that can drastically improve build time performance.

DllPluginкомбинироватьDllRefrencePluginИспользование плагинов, которые дизассемблируют и упаковывают создаваемые файлы пакетов, может полностью увеличить скорость упаковки webpack, тем самым значительно сократив время сборки в процессе разработки.

Во-вторых, строительный эффект

Вывод первый:использоватьDllPluginа такжеDllRefrencePluginЧтобы построить, вы можете сократить время сборки на 50% до 70%.

Справочная демонстрация:dllplugin-demo

2.1 Скорость сборки перед использованием DllPlugin

входной файлmain.jsпредставилjQueryДля упаковки файла, как показано на рисунке, требуется 2,3 с.

2.2 Скорость сборки после использования DllPlugin

После использования плагина время упаковки составляет 0,6 с, а в одном сравнении время сокращается на 73%!

2.3 Как проверить, что DLLPlugin вступил в силу

Сравнивая список модулей, упакованных на двух рисунках выше, на рисунке 2 показана другая строка вывода:

[0] delegated ./src/components/jquery.js from dll-reference vendor_57c12dcd8d9774596525 42 bytes {0} [built]

Это показывает, что в этом процессе упаковки нет переупаковки.jQueryмодуля, а непосредственно изvendor_57c12dcd8d9774596525агент.

3. Начать

Схематическая диаграмма роли DllPlugin:

3.1 Настройте webpack.dll.config.js для упаковки статических общедоступных ресурсов

3.1.1 Определение webpack.dll.config.js

Чтобы уменьшить место, публикуется только ключевое содержимое конфигурации, а подробный доступdllplugin-demo:

// webpack.dll.config.js
module.exports = {
    entry: {
        // 定义程序中打包公共文件的入口文件vendor.js
        vendor: [path.resolve(src, 'js', 'vendor.js')],
    },
    
    plugins: [
        new webpack.DllPlugin({
            // manifest缓存文件的请求上下文（默认为webpack执行环境上下文）
            context: process.cwd(),
            
            // manifest.json文件的输出位置
            path: path.join(src, 'js', 'dll', '[name]-manifest.json'),
            
            // 定义打包的公共vendor文件对外暴露的函数名
            name: '[name]_[hash]'
        })
    ]
}
3.1.2 Объявление статических общедоступных ресурсов

в конфигурацииwebpack.dll.config.jsфайл, вvendor.jsСтатические общедоступные ресурсы, на которые есть ссылки в программе проекта, объявлены в файлах .

// vendor.js
// 引入自定义在项目目录中的公共资源（可以在配置中声明alias映射关系）
import 'jquery';

// or 引入npm包资源
// import 'Vue';
3.1.3 Упаковка статических общедоступных ресурсов
// cross-env模块需要另外安装
cross-env NODE_ENV=production webpack --config webpack.dll.config.js --colors --display-modules

согласно сwebpack.dll.config.js, будет создан в указанном местеvendor.dll.jsдокумент.

3.2 Настройте webpack.config.js для упаковки файла записи

Создание статических общедоступных ресурсовvendor.dll.jsПосле этого следующим шагом является связывание ссылок в файле ввода, что выполняетсяDllRefrencePluginЗавершенный.

3.2.1 Связывание ссылок в webpack.config.js
// webpack.config.js
module.exports = {
    entry: {
        // 项目入口文件
        'app':path.resolve(src, 'js', 'main.js')
    },
    plugins: [
        // dllPlugin关联配置
        new webpack.DllReferencePlugin({
            // 跟dll.config里面DllPlugin的context一致
            context: process.cwd(), 
            
            // dll过程生成的manifest文件
            manifest: require(path.join(src, 'js', "dll", "vendor-manifest.json"))
        })
    ]
}
3.2.2 Ссылка на статические общедоступные ресурсы в файле записи проекта
// main.js
// 引入的公共模块如果在vendor中有被引用过，那么编译的时候直接使用静态文件vendor.dll.js
import $ from 'jquery';
console.log($)

// import Vue from "Vue";
// console.log(Vue)

Метод введения ничем не отличается, его можно импортировать нормально.

3.2.3 Ссылки на общедоступные статические ресурсы в шаблонах проектов

Последний шаг - вставить в шаблонvendor.dll.js

<!-- index.html -->
<script type="text/javascript" src="/src/js/dll/vendor.dll.js"></script>

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

Эпилог

вышеwebpack(Версия 4) Небольшой обзор процесса использования, добро пожаловать на публикацию ошибок или предоставление предложений по оптимизации~

Ссылаться на:

DllPlugin

Ускорьте сборку Webpack с помощью HappyPack и DllPlugin

Категории