優化webpack構建時間的小技巧

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

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

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

smp

在此以前，咱們須要有一個量化的指標證實咱們作的是有意義的。這時候 speed-measure-webpack-plugin就派上用場。它能夠測量各個插件和loader的使用時間，量化指標。

根據官網的教程，用smp包裹webpack配置後，執行構建，會獲得以下的信息：

咱們能夠從中獲得優化後的時間和具體每一個插件和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(', '),
      },
    ],
  ],
  // ...
}
複製代碼

上面三個簡單的技巧，能夠顯著的減小構件時間，提高開發體驗。

原文連接