Две небольшие оптимизации, скорость упаковки веб-пакетов взлетела

оптимизация скорости упаковки webpack-js

По некоторым причинам фронтенд-проекты компании размещаются на одном складе (например, бизнес а, б, в, соответствующий каталогу app/a app/b app/c) и упаковываются одним и тем же набором webpack конфигурация, каждая При построении во второй раз упакуйте указанный бизнес, передав определенные параметры

Адрес этой статьи на github

Оптимизация 1 с использованием babel7,`@babel/preset-typescript`заменять`ts-loader`

использоватьbabel7и использовать@babel/preset-typescriptВместо ts-loader. С одной стороны, у babel7 более быстрая скорость, с другой стороны, ts-loader будет читать ts-config по умолчанию, поэтому при каждой сборке ts-loader будет проверять тип всех сервисов (даже если мы упаковываем только бизнес).

Следует отметить, что после обновления babel7 соответствующие имена пакетов стали@babelпрефикс иstage-x不再支持（大概原因是stage-x每年都会有变，有的提案可能被废弃导致有的语法被移除，但是却很多项目可能使用了，换成单独配置相关语法特性），需要转对应。 так же как,@babel/preset-typescriptне поддерживаетnamespace Подробности.

Руководство по миграции

    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.3.3",

Для первой версии вы можете использовать приведенное выше для реактивного проекта.

@babel/core Основная библиотека Babel
@babel/plugin-proposal-class-properties написать привязки стрелочных функций для очень полезных классов в реакции
Синтаксис декоратора @babel/plugin-proposal-decorators
@babel/preset-env es6+transform
@babel/preset-react реагирует на поддержку jsx
Поддержка @babel/preset-typescript ts

добавлен бабел7babel.config.jsвведите конфигурацию, сравните.babelrc..babelrcОн ищет конфигурацию из каждого файла,babel.config.jsне будет.

// babel.config.js

module.exports = function(api) {
  api.cache(true)

  const presets = [
    [
      '@babel/preset-env',
      {
        modules: false
      }
    ],
    '@babel/preset-react',
    '@babel/preset-typescript'
  ]
  const plugins = [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }]
  ]

  return {
    presets,
    plugins
  }
}

// webpack.js
...
        {
          test: /\.(jsx?|tsx?)$/,
          exclude: ['node_modules'],
          use: ['babel-loader']
        },
...

Оптимизировать 2 счастливых пакета

happypack — это плагин для webpack, предназначенный для ускорения сборки кода с помощью модели с несколькими процессами. (Это улучшение все еще очевидно)

использоватьhappypackнагрузкаbabel-loader.

let HappyPack = require('happypack')
let os = require('os')
let happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
...
        {
          test: /\.(jsx?|tsx?)$/,
          exclude: ['node_modules'],
          use: ['happypack/loader?id=babel']
        },
...
...
    plugins: [
      new HappyPack({
        id: 'babel',
        loaders: [
          {
            loader: 'babel-loader'
          }
        ],
        threadPool: happyThreadPool
      })]
...

До оптимизации

dev babel6+ts-loader 56806ms

build babel6+happypack 29758ms

Оптимизировано разработчик babel7+happypack 9576ms

build babel7+happypack 23838ms

gayhub

оптимизация скорости упаковки webpack-js

Оптимизация 1 с использованием babel7,@babel/preset-typescriptзаменятьts-loader

Оптимизировать 2 счастливых пакета

Оптимизация 1 с использованием babel7,`@babel/preset-typescript`заменять`ts-loader`