Webpack speed optimization – JS

Due to some reasons, many businesses of the company’s front-end project are placed in the same warehouse (for example, business A, B and C, corresponding to the directory APP/A app/ B app/ C), and are packaged with the same webpack configuration, and the specified business is packaged by passing in specific parameters during each construction

Github address for this article

Optimization 1 using Babel7,@babel/preset-typescriptalternativets-loader

Use babel7 and use @babel/preset-typescript instead of TS-loader. On the one hand, babel7 is much faster, on the other hand, ts-Loader reads TS-Config by default, so every build ts-Loader checks for all business types (even if we only package a business).

It should be noted that after upgrading babel7, relevant package names are changed to the prefix @babel, and stage-x is no longer supported (probably because stage-x changes every year, some proposals may be abandoned and some syntax will be removed, but many projects may use it, and relevant syntax features should be configured separately), so we need to switch to corresponding. Also, @babel/preset-typescript no longer supports namespace details.

Migration guide

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

For the React project, use the above version.

  • @babel/core The core library of Babel
  • @babel/plugin-proposal-class-properties Write react very useful class arrow function binding
  • @babel/plugin-proposal-decorators decorators syntax
  • @ Babel/preset – env es6 + conversion
  • @babel/preset- React React JSX support
  • @ Babel/preset – typescript ts support

Babel7 adds a configuration of type babel.config.js, compared to.babelrc. .babelrc looks up the configuration from every file, babel.config.js does not.

// 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']},...Copy the code

Optimization of 2 happypack

Happypack is a webPack plug-in designed to speed up code building through a multi-process model. (The improvement is still significant)

Use happypack to load 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
      })]
...
Copy the code

Before optimization

dev babel6+ts-loader 56806ms

Dev babel7+happypack 9576ms

gayhub