webpack4 js構建速度優化

請注意：本文主要是針對 webpack4 的 js 構建速度作優化。

用一句話總結本文，就是給 js 構建流程加 cache，讓任務並行。

babel-loader

首先第一個主角 babel-loader,給babel-loader 加一個參數便可cacheDirectory: true。相關的配置還有 cacheIdentifier 和 cacheCompression，cacheIdentifier 是給 cache 配一個標識，cacheCompression 是babel-loader 默認會以 gzip 去壓縮，若是你的文件量很是大能夠嘗試設爲 false。

thread-loader

什麼，光有 cahche 仍是不夠快嗎，誰讓你一次要改那麼多文件。cache 只能在第一次構建以後起做用，並且第一次構建自己也依舊是耗時的事情。那麼咱們請出第二個主角 thread-loader，這貨看名字就知道是幹嗎的吧。簡單說就是讓你的多核 cpu 按必定配置來參與到打包流程中。加進來以後 js rule 的配置就變成如下

rules: [
  {
    test: /\.js$/,
    include: /(src)/,
    use: [
      {
        loader: 'thread-loader',
        options: {
          workers: os.cpus().length
        }
      },
      {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          presets: [['es2015', { modules: false }], 'stage-0', 'react']
        }
      }
    ]
  },

workers 的數量就是參與編譯的 cpu 核心數量。thread-loader 的參數大體能夠分爲 workers 和 pool 兩類：

• workerParallelJobs 一個 worker 進程中並行執行工做的數量，默認20
• workerNodeArgs 額外的 node.js 參數 ['--max-old-space-size', '1024']
• poolTimeout 閒置時定時刪除 worker 進程，默認爲 500ms
• poolParallelJobs 一個 pool 的並行任務數

若是項目的 css 文件也不少其實不妨爲 css 也加上 thread-loader。

uglifyjs-webpack-plugin

js 完成編譯以後一般還會有一個 uglify 的過程，這裏如法炮製便可

optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: '.uglifyJsCache',
        parallel: os.cpus().length,
        uglifyOptions: {}
      })
   ]
}

是否是很熟悉,加一個 cache 和 parallel 就能夠了。

好了，本文到這裏就結束了。若是本文對你有幫助不妨點個贊，若是有問題，很是歡迎來討論（最好帶上代碼）。本文沒有加時間的對比，由於我以爲沒有什麼意義，不一樣項目大小和參數設置會帶來徹底不一樣的效果。本文的方式適不適合你的項目，加一下試試就知道了。