Ускорьте создание клиентских интерфейсов уже сегодня

Webpack
Ускорьте создание клиентских интерфейсов уже сегодня

В данный момент я возвращаюсь в Шэньчжэнь и думаю о том, чтобы написать что-нибудь, чем недавно пользовался. Если в вашем проекте также используется система релизов или инструмент CI, и проект относительно большой, а релиз часто занимает десять минут, то вам могут подойти следующие инструменты.

Построить

Есть два аспекта, которые влияют на скорость публикации переднего плана: создание и сжатие.Оптимизация этих двух вещей может значительно сократить время публикации.

thread-loader

thread-loaderбудет ли вашloaderПомещается в рабочий пул для запуска, чтобы обеспечить многопоточное построение.

Если этот загрузчик размещен перед другими загрузчиками, загрузчики, размещенные после этого загрузчика, будут работать в отдельном пуле рабочих процессов.

Install

$ npm install --save-dev thread-loader

использование и пример

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve("src"),
        use: [
          "thread-loader",
          // your expensive loader (e.g babel-loader)
        ]
      }
    ]
  }

Для получения дополнительных конфигураций см.:GitHub.com/Webpack-con…

happypack

happypack, с помощью модели с несколькими процессами, чтобы ускорить создание кода. Судя по количеству запусков на github, happypack используется большим количеством людей и более популярен.

принцип

Соответствующие технические принципы больше не являются громоздкими, вы можете проверить соответствующие статьи Taobao FED.Анализ принципа happypack

использование и пример

var HappyPack = require('happypack');
var happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

// ... 省略其余配置
module: {
  loaders: [
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract(
            'style',
            path.resolve(__dirname, './node_modules', 'happypack/loader') + '?id=less'
        )
      }
    ]
  },
  plugins: [
      new HappyPack({
        id: 'less',
        loaders: ['css!less'],
        threadPool: happyThreadPool,
        cache: true,
        verbose: true
      })
  ]

Резюме метода сборки

С точки зрения фактического использования thread-loader и happypack мало влияют на скорость упаковки небольших проектов из-за их собственных дополнительных накладных расходов, таких как ввод-вывод,Рекомендуется для использования только в крупных проектах, вы можете протестировать его перед запуском в производство.

компрессия

плагин webpack-parallel-uglify устарел

Проект в основном в стадии no support, никто не занимается вопросом, никто не сливает пр.

рекомендуется использовать terser-webpack-plugin

terser-webpack-pluginэто использованиеterserПлагин webpack для сжатия js.

Минификация — один из самых трудоемких шагов в предрелизной обработке.Если вы используете webpack 4, всего несколько строк кода могут ускорить вашу сборку и выпуск.

использование и пример

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [new TerserPlugin(
      parallel: true   // 多线程
    )],
  },
};

См. ссылку выше для большего использования.

Суммировать

С оптимизацией веб-пакета 4 скорость создания действительно значительно улучшилась, и она также была вдохновлена ​​​​инструментами упаковки веб-приложений с нулевой конфигурацией, такими как посылки, На самом деле, конфигурация веб-пакета становится все более и более лаконичной, почему бы и нет. попробуй настроить?

Категории