頻道欄目
首頁 > 程序開發 > web前端 > HTML/CSS > 正文
webpack4js構建速度優化-flashback-SegmentFault思否
2019-05-11 22:05:10           
收藏   我要投稿

請注意:本文主要是針對 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 就可以了。

好了,本文到這里就結束了。如果本文對你有幫助不妨點個贊,如果有問題,非常歡迎來討論(最好帶上代碼)。本文沒有加時間的對比,因為我覺得沒有什么意義,不同項目大小和參數設置會帶來完全不同的效果。本文的方式適不適合你的項目,加一下試試就知道了。

點擊復制鏈接 與好友分享!回本站首頁
相關TAG標簽
上一篇:[打包優化]從0到1搭建element后臺框架優化篇-前端小東西-SegmentFault思否
下一篇:【前端刷題筆記02】字節跳動2019面試題-一只想做全棧的貓-SegmentFault思否
相關文章
圖文推薦
點擊排行

關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

加拿大28火车判定方法