Webpack如何實現代碼分割

Webpack 實現代碼分割（Code Splitting）的方法主要有兩種：使用動態導入（Dynamic Imports）和使用 SplitChunksPlugin 插件。

1. 使用動態導入（Dynamic Imports）：

動態導入允許你將某個模塊單獨打包成一個 chunk，然后在需要的時候按需加載。這樣可以減少首次加載頁面時需要下載的代碼量，提高應用性能。要實現動態導入，你需要使用 import() 語法。

例如，假設你有一個名為 myModule.js 的模塊，你可以這樣動態導入它：

// 使用動態導入將 myModule.js 分割成一個單獨的 chunk
import('./myModule.js').then(module => {
  // 使用 module
});

Webpack 會自動識別這種動態導入的語法，并將 myModule.js 分割成一個單獨的 chunk。

2. 使用 SplitChunksPlugin 插件：

SplitChunksPlugin 是 Webpack 中的一個內置插件，用于將公共代碼（例如第三方庫、公共組件等）分割成單獨的 chunk，以便瀏覽器緩存和重復使用。要啟用 SplitChunksPlugin，你只需在 webpack.config.js 文件中配置相關選項即可。

以下是一個簡單的配置示例：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'all', // 可選值有 'async' 和 'initial'，表示分割哪些類型的代碼
      minSize: 30000, // 生成 chunk 的最小體積（以字節為單位）
      maxSize: 0, // 生成 chunk 的最大體積（以字節為單位）
      minChunks: 1, // 模塊被引用的最小次數
      maxAsyncRequests: 6, // 按需加載時的最大并行請求數
      maxInitialRequests: 4, // 入口點的最大并行請求數
      automaticNameDelimiter: '~', // 生成 chunk 名稱的分隔符
      name: true, // 是否根據模塊和緩存組生成自定義名稱，默認為 false
      cacheGroups: { // 定義緩存組，用于控制代碼分割的細節
        vendors: {
          test: /[\\/]node_modules[\\/]/, // 匹配 node_modules 中的模塊
          priority: -10 // 設置優先級
        },
        default: {
          minChunks: 2, // 非 node_modules 模塊的最小引用次數
          priority: -20, // 設置優先級
          reuseExistingChunk: true // 如果當前 chunk 已經存在，則復用它，而不是創建一個新的 chunk
        }
      }
    }
  }
};

通過以上配置，Webpack 會自動將 node_modules 中的模塊和其他公共代碼分割成單獨的 chunk。你可以根據項目需求調整這些配置選項，以實現更精細的代碼分割。