兩個小優化，webpack打包速度飛起來

時間 2019-11-06

標籤兩個優化 webpack 打包速度飛起简体版

原文原文鏈接

webpack打包速度優化-js

公司前端項目因爲一些緣由，不少業務都是放在同一倉庫內（例如業務a、b、c，對應目錄app/a app/b app/c），而且是用同一套webpack的配置進行打包，每次構建的時候經過傳入特定的參數打包指定的業務前端

優化1 使用babel7，`@babel/preset-typescript`替代`ts-loader`

使用babel7而且使用@babel/preset-typescript代替ts-loader。一方面，babel7擁有着更快的速度，另外一方面，ts-loader默認是會讀取ts-config的，因而每次構建的時候ts-loader都會去檢查全有業務的類型（即便咱們只打包a業務）。react

須要注意的是升級babel7後，相關包名都變成@babel前綴，而且stage-x再也不支持（大概緣由是stage-x每一年都會有變，有的提案可能被廢棄致使有的語法被移除，可是卻不少項目可能使用了，換成單獨配置相關語法特性），須要轉對應。以及，@babel/preset-typescript不在支持namespace 詳情。webpack

遷移指南git

"@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",
複製代碼

一版而言對於react項目使用上面的便可。es6

@babel/core babel的核心庫
@babel/plugin-proposal-class-properties 寫react很是實用的類的箭頭函數綁定
@babel/plugin-proposal-decorators 裝飾器語法
@babel/preset-env es6+轉換
@babel/preset-react react jsx支持
@babel/preset-typescript ts支持

babel7新增了babel.config.js型的配置，對比.babelrc。.babelrc是從每個文件向上查找配置的，babel.config.js則不會。github

// 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-babel']
        },
...
複製代碼

優化2 happypack

happypack 是 webpack 的一個插件，目的是經過多進程模型，來加速代碼構建。（這個提高仍是很明顯的）web

使用happypack加載babel-loader。typescript

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
      })]
...
複製代碼