Webpack DllPlugin делает скорость сборки гладкой и шелковистой

Webpack

концепция

DLLPlugin и DLLReferencePlugin определенным образом реализуют разбиение бандлов, и в то же время значительно улучшают скорость сборки, компилируя библиотеку, которая содержит большое количество повторно используемых модулей и не часто обновляется, ее нужно компилировать только один раз, и указанный файл существует после завершения компиляции в середине. В последующем процессе сборки эти модули не будут компилироваться, а напрямую использовать DllReferencePlugin для ссылки на код библиотеки динамической компоновки. Этот метод обычно используется для часто используемых сторонних модулей, таких как react, react-dom, lodash и т. д. Пока эти модули не обновляются, эти библиотеки динамической компоновки не нужно перекомпилировать.

Резюме

В этой статье рассказывается об использовании подключаемого модуля DllPlugin в Webpack и использовании AddAssetHtmlPlugin или HtmlWebpackIncludeAssetsPlugin для вставки встроенного JS-файла в HTML-страницу.

кодовый адрес

github: исходный код
Добро пожаловать на обмен, Звезда!

каталог проекта

Обычный проект webpack, процесс сборки в этой статье не описан

myreact
|- /build
  |- webpack.config.js
  |- webpack.dll.conf.js
|- /dist
  |- dll
  |- js
|- /src
  |- index.js
|- package.json
|- index.html

Конкретная структура проекта, пожалуйста, смотрите рисунок ниже

Начнем путешествие с DLL

1. Создайте webpack.dll.conf.js (DllPlugin) в каталоге сборки.

const webpack = require("webpack")
const path = require('path')
const CleanWebpaclPlugin = require('clean-webpack-plugin');
const resolve = (dir) => path.join(__dirname, '..', dir);

module.exports = {
  entry: {
    # 将 react、lodash等模块作为入口编译成动态链接库
    vendor: ['react', 'react-dom', 'react-router-dom', 'lodash']
  },
  output: {
    # 指定生成文件所在目录文件夹，
    # 将它们存放在了 src 文件夹下
    path: resolve('public'),
    # 指定文件名
    library: '_dll_[name]',
    # 存放动态链接库的全局变量名称，例如对应 lodash 来说就是 lodash_dll_lib
    # 这个名称需要与 DllPlugin 插件中的 name 属性值对应起来
    filename: 'dll/_dll_[name].[hash].js'
  },
  plugins: [
    new CleanWebpaclPlugin(['dll'], {
        root: resolve('public')
    }),
    new webpack.DllPlugin({
      name: '_dll_[name]',
    # 和output.library中一致，值就是输出的manifest.json中的 name值
      path: path.join(__dirname, '../public/dll', '[name].manifest.json')
    })
  ]
}

2. Создайте webpack.base.conf.js с помощью DllReferencePlugin.

const path = require('path');
const webpack = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const CleanWebpaclPlugin = require('clean-webpack-plugin');
const resolve = (dir) => path.join(__dirname, '..', dir);

module.exports = {
    entry: './src/index.js',
    output: {
        path: resolve('dist'),
        filename: 'js/[name].[hash].js',
        library: '_dll_[name]'
    },
    plugins: [
        # 需添加root 否则无法删除，exclude未生效
        new CleanWebpackPlugin(['dist'], {
          root: path.join(__dirname, '..')
        }),
        new HTMLWebpackPlugin({
            title: 'Webpak DllPlugin 的使用',
            template: resolve('index.html'),
            filename: 'index.html'
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        }),
        # 告诉 Webpack 使用动态链接库
        new webpack.DllReferencePlugin({
            // 描述 lodash 动态链接库的文件内容
            manifest: require(../public/dll/vendor.manifest')
        })
    ]
}

3. Вставьте библиотеку динамической компоновки в файл index.html.

Поскольку мы обычно компилируем динамическую библиотеку только один раз, если только не обновляется зависимая сторонняя библиотека, то ее компилировать не нужно, поэтому эти модули не включены в файл index.js записи, поэтому они должны быть введены отдельно в index.html.

два варианта

  1. Вручную добавить скрипт, вручную скопировать упакованную папку dll в dist, проблемы с повторением, очень неудобно
  2. Используйте add-asset-html-webpack-plugin или html-webpack-include-assets-plugin для вставки в html, простая автоматизация, красивая

Поэтому мы обязательно возьмем второй способ, далее речь пойдет об использовании плагинов add-asset-html-webpack-plugin и html-webpack-include-assets-plugin. в проекте.

Установка аналогична

npm install add-asset-html-webpack-plugin -D
npm install html-webpack-include-assets-plugin -D

Есть сходство в использовании

Использовать в файле webpack.base.conf.js

# add-asset-html-webpack-plugin
...;
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');

module.exports = {
    ...,
    plugins: [
        ...,
        # 给定的 JS 或 CSS 文件添加到 webpack 配置的文件中，并将其放入资源列表 html webpack插件注入到生成的 html 中。
        new AddAssetHtmlPlugin([
            {
                # 要添加到编译中的文件的绝对路径
                filepath: path.resolve(__dirname,'../public/dll/_dll_vendor.js'),
                outputPath: 'dll',
                publicPath: 'dll',
                includeSourcemap: false
            }
        ])
    ]
}


# html-webpack-include-assets-plugin
...;
const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin');

module.exports = {
    ...,
    plugins: [
        ...,
        # 给定的 JS 或 CSS 文件添加到 webpack 配置的文件中，并将其放入资源列表 html webpack插件注入到生成的 html 中。
        new HtmlWebpackIncludeAssetsPlugin([
            {
                assets: ['dll/_dll_vendor.js'],
                append: false
            }
        ])
    ]
}

Разница между двумя

index.html

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="UTF-8">
        <title>爱你的一只猫哈哈哈1111</title>
    </head>
    
    <body>
        <div id='root'></div>

</html>
<script type="text/javascript" src="dll/_dll_vendor.js"></script>
<script type="text/javascript" src="/js/runtime.830efec54753fd6ed91b.js"></script>
<script type="text/javascript" src="/js/vendors.830efec54753fd6ed91b.js"></script>
<script type="text/javascript" src="/js/app.830efec54753fd6ed91b.js"></script>

запустить проект

 npm run build

Просмотрите файлы в dist файле

Связанная документация

веб-пакет на китайском

Категории