優化webpack構建時間的小技巧


在之前工作的地方,我們一直使用webpck去構建。但是,經過長達四年的更新迭代,每個人都在同一個項目中做了不同的操作和更新,這導致我們生產構建時間達到了驚人的一分半,watch模式的rebuild也達到了14秒之久。

這導致你每次保存代碼都需要等待漫長的14秒之久。

有幾個小技巧可以是構建時間從一分半驟降至20秒,rebuild驟降到1秒左右。

smp

在此之前,我們需要有一個量化的指標證明我們做的是有意義的。這時候 speed-measure-webpack-plugin就派上用場。它可以測量各個插件和loader的使用時間,量化指標。

根據官網的教程,用smp包裹webpack配置后,執行構建,會得到如下的信息:

WX20200115-163558.png

我們可以從中得到優化后的時間和具體每個插件和loaders所花時間。

cache-loader

添加完SMP后,我們要處理的第一個問題就是初始化構建的時間(這里指的是首次構建之后w,ebpack再次構建所花費的時間),這里引入我們所需的第一個loader:cache-loader

cache-loader是一個將之前的結果緩存到硬盤(數據庫)的loader,意味着下一次執行webpack的時候,會有很顯著顯著的提升。

demo如下:

{
  rules: [
    {
      test: /\.jsx?$/,
      use: [
        'cache-loader',
        'babel-loader',
      ],
    },
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'cache-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader',
      ],
    },
  ]
}

增加后,我們能過省去大約75秒的首次構建時間。接下來,讓我們處理rebuild時間,更新devtool就能達到比較明顯的效果。

webpack source maps

在webpack的配置中,我們可以找到一個devtool的配置,根據文檔所示,它可以讓我們:

選擇一種風格的source map去增強debugger能力。不過這個功能會影響build和rebuild的速度。

換句話說,改變這個配置,你會得到對應的source maps結果,並且更重要的是,它會影響你得到bundle的等待時間。

根據使用經驗來合理配置devtool,我們可以改變devtool的值從最慢的source-map -> eval-sourcemap,這個操作讓我們把時間從14秒減少到3.5秒。

{
  devtool: process.env.NODE_ENV === 'development'
    ? 'eval-source-map'
    : 'source-map'
}

文檔上還有很多值。你可以選擇最適合你的哪一種。

transpile

另外,現在瀏覽器已經支持了大部分的最新語法和api,在開發環境中,我們並不需要那種完美的打包方案,比如下面這樣:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: [
          'last 1 chrome version',
          'last 1 safari version',
          'last 1 firefox version',
        ].join(', '),
      },
    ],
  ],
  // ...
}

上面三個簡單的技巧,可以顯著的減少構件時間,提升開發體驗。

原文鏈接


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM