webpack4和5的區別

一、性能方面

1、webpack5有更好的性能表現。在壓縮方面，webpack5支持多線程壓縮，壓縮速度更快，而webpack4會存在產生瓶頸的情況。

2、模塊傳遞中做了優化。webpack4中，辦法是儘可能的壓縮代碼，優化優化，webpack5則使用了更好的模塊樹傳遞的方式，將每個模塊構建前的 meta 信息進行了緩存，嘗試減少不必要的構建。

3、webpack5默認使用 webassembly ，webpack4 則默認使用 jsonp。webassembly 比 jsonp 更快，而且據說還會消耗更少的內存。

// webpack4
module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [
      // terser-webpack-plugin
    ]
  }
};

// webpack5
module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [
      new WebpackMinimizerPlugin({
        minimizerOptions: {
          // terser options
        },
      }),
    ],
  },
};

二、持久緩存方面

1、webpack5默認開啟持久緩存，可以大大減少構建時間。而webpack4需要配置緩存機制，能夠減少構建時間，但並不會減短。

2、webpack5使用持久化緩存，能存儲中間狀態變化。webpack5構建完成後會保存所有模塊及其依賴關係、loader/插件等的中間狀態。如果下次構建時，緩存中有相同的模塊，則可跳過運行相應的加載器 / 插件等，直接使用緩存，這麼做大量分享文件不需要重新構建，提高了構建緩存命中率。

// webpack4
module.exports = {
  // ...
  cache: true,
};

// webpack5
module.exports = {
  // ...
  cache: {
    type: 'memory'
  },
};

三、Tree-Shaking方面

1、webpack5改善了 Tree Shaking 的性能。webpack5重構了 Tree Shaking 的算法，以此更快的找出哪些代碼在構建時未使用，從而更有效地減少構建輸出。

2、webpack5默認支持 pure 模塊標記，這是一個新 feature 可以用戶在自己的代碼中進行註解，確定模塊的 sideeffect，從而更好的告訴 webpack 如何進行 Tree Shaking。

// webpack4
import { animate } from './animation.js';
export function layout() {
  animate(); // Tree Shaking 可以發現這裡沒有使用
}

// webpack5
import { animate } from './animation.js';
export function layout() {
  animate({ // 你想用有效代碼
    speed: 1000, // 它會重複並被 Tree Shaking 消除
    height: 500, // 在 Tree Shaking 之前不會發生任何改變
    maxWidth: 200 // 除非使用 pure:false 標記地址已知的 side-effect
  });
}

四、asset模塊查找方式

1、webpack5通過資源解析時候有更多的可能性發現資源，所以 webpack 5 導入資源的方式發生了一點變化，默認情況下它現在會從當前目錄和父級目錄中的 ‘./node_modules’ 解析文件。這樣做可以為你的開發帶來一些便利，不過也可能會影響某些遺留代碼庫，你需要小心對待。

2、webpack5使用了新型 asset 模塊類型來更好地管理文件模塊。在webpack5中，asset資源(如圖片、視頻、字體)對應了一個新的輸出模塊類型：asset module type。這個新的類型直接放回一個 file URL，而不是通過 JavaScript 解析這個模塊。這樣可以直接從 HTML / CSS 中加載文件，是在新應用程序中不錯的替代方案。

// webpack4
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};

// webpack5
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|svg)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

五、細節功能升級方面

1、webpack5新增了一個ids: ‘deterministic’的選項，它允許每次打包時生成可預測的短號，但在不同的編譯中仍可以實現長期緩存。使用此選項還支持通過名稱提供的模塊的可讀性優化。

2、webpack5增加了一些新的鉤子，其中最重要的是PersistentCache插件。該插件可以將緩存持久化到磁盤上，並在每次重新構建時減少Webpack重新生成信息和AST的成本。

3、webpack5廢棄了一些功能，例如：Node v8支持，廢棄了require.include，廢棄了動態import()中的介入。

// webpack4
new HtmlWebpackPlugin({
  parser: 'html-parser'
});

// webpack5
new HtmlWebpackPlugin({
  parser: {
    parse: htmlParser.parse
  }
});