Используйте happypack для ускорения сборки проекта webpack

Webpack

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

Роль Happypack

При сборке проекта с помощью Webpack анализируется и обрабатывается большое количество файлов. Когда количество файлов увеличивается, артефакты Webpack становятся медленнее. Поскольку Webpack, работающий на Node.js, является однопоточной моделью, задачи, которые должен обрабатывать Webpack, должны выполняться одна за другой.

Функция Happypack состоит в том, чтобы разложить задачу анализа файла на несколько подпроцессов для одновременного выполнения. Дочерний процесс обрабатывает задачу, а затем отправляет результат основному процессу. Таким образом, это может значительно повысить скорость компонентов проекта Webpack.

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

Код проекта этой статьи:webpack-happypack-demo

Добро пожаловать Звезда!

Использование Хэппипака

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

Установить

$ npm install happypack --save-dev

Использование (три шага для завершения)

1. После завершения установки запустите HappyPack

webpack.config.js

const HappyPack = require('happypack');

module.exports = {
    ...
}

Во-вторых, будет обычнымloaderзаменитьhappypack/loader

webpack.config.js

const HappyPack = require('happypack');

module.exports = {
    ...
    module: {
        rules: [
            test: /\.js$/,
            // use: ['babel-loader?cacheDirectory'] 之前是使用这种方式直接使用 loader
            // 现在用下面的方式替换成 happypack/loader，并使用 id 指定创建的 HappyPack 插件
            use: ['happypack/loader?id=babel'],
            // 排除 node_modules 目录下的文件
            exclude: /node_modules/
        ]
    }
}

3. Создайте плагин HappyPack

webpack.config.js

const HappyPack = require('happypack');

module.exports = {
    ...
    module: {
        rules: [
            test: /\.js$/,
            // use: ['babel-loader?cacheDirectory'] 之前是使用这种方式直接使用 loader
            // 现在用下面的方式替换成 happypack/loader，并使用 id 指定创建的 HappyPack 插件
            use: ['happypack/loader?id=babel'],
            // 排除 node_modules 目录下的文件
            exclude: /node_modules/
        ]
    },
    plugins: [
        ...,
        new HappyPack({
            /*
             * 必须配置
             */
            // id 标识符，要和 rules 中指定的 id 对应起来
            id: 'babel',
            // 需要使用的 loader，用法和 rules 中 Loader 配置一样
            // 可以直接是字符串，也可以是对象形式
            loaders: ['babel-loader?cacheDirectory']
        })
    ]
}

Таким образом, использование Happypack настроено, запустите проект, и вы увидите следующие подсказки, напечатанные на консоли:

Happy[babel]: Version: 5.0.1. Threads: 3
Happy[babel]: All set; signaling webpack to proceed.

Указывает, что конфигурация вступила в силу.

HappypackПример

использовать одинloaderВремя

С вышеуказанной конфигурацией, когда человек находится в погрузчике, это написать один раз

exports.module = {
    rules: [
        {
            test: /.js$/,
            use: 'happypack/loader?id=babel'
        }
    ]
};

exports.plugins = [
    new HappyPack({
        id: 'babel',
        loaders: [ 'babel-loader?cacheDirectory' ]
    });
];

использовать несколькоloaderВремя

exports.module = {
    rules: [
        {
            test: /\.(css|less)$/,
            use: 'happypack/loader?id=styles'
        },
    ]
};

exports.plugins = [
    new HappyPack({
        id: 'styles',
        loaders: [ 'style-loader', 'css-loader', 'less-loader' ]
    });
];

Happypackэлемент конфигурации

  • id: Stringтипа, дляhappypackДля идентификации уникального идентификатора, используемого для связыванияmodule.rulesсерединаhappypack/loader

  • loaders: ArrayТип, установить различныеloaderконфигурация, сmodule.rulesсерединаloaderИспользование конфигурации такое же

// 无配置时，可直接使用字符串形式
new HappyPack({
    id: 'babel',
    loaders: ['babel-loader?cacheDirectory']
})

// 有配置项时，可以使用对象形式
new HappyPack({
    id: 'babel',
    loaders: [
        {
            loader: 'babel-loader',
            options: {
                cacheDirectory: true
            }
        }
    ]
})

  • threads: NumberТип, указывающий количество процессов, используемых одновременно, когда соответствующий загрузчик компилирует исходный файл, по умолчанию 3

  • threadPool: HappyThreadPoolОбъект, представляющий общий пул процессов, то есть несколько экземпляров HappyPack используют подпроцессы в одном общем пуле процессов для обработки задач, чтобы предотвратить чрезмерное использование ресурсов.

// 创建一个 HappyThreadPool，作为所有 loader 共用的线程池
const happyThreadPool = HappyPack.ThreadPool({ size: 5 });

...
new HappyPack({
    id: 'babel',
    loaders: [
        {
            loader: 'babel-loader',
            options: {
                cacheDirectory: true
            }
        }
    ],
    threadPool: happyThreadPool
})

  • verbose: разрешить лиhappypackВыходной журнал, по умолчаниюtrue

  • verboseWhenProfiling: разрешить лиhappypackБегwebpack --profileвыходной журнал, по умолчаниюfalse

  • debug: разрешить лиhappypackПечать информации об анализе журнала, значение по умолчаниюfalse

Персональное резюме

Небольшого личного резюме недостаточно для справки

  • В тестовой демонстрации или небольшом проекте используйтеhappypackУлучшение скорости строительства проекта не очевидно, и оно даже увеличит скорость строительства проекта.

  • В более сложных крупных и средних проектах используйтеhappypackЧтобы увидеть более очевидное улучшение скорости сборки

  • Поэтому, используяhappypackПожалуйста, выберите в зависимости от конкретной ситуации, если это продлевает скорость строительства проекта, нет необходимости использоватьhappypack

Демонстрационный адрес этой статьи

Код проекта этой статьи:webpack-happypack-demo

Добро пожаловать Звезда!

Категории