通過(guò) Webpack 實(shí)現(xiàn)代碼分割（Code Splitting）和 Tree Shaking 是優(yōu)化前端應(yīng)用性能的核心技術(shù)。以下是具體實(shí)現(xiàn)方法和注意事項(xiàng)：

一、代碼分割（Code Splitting）

1. 入口起點(diǎn)分割

// webpack.config.js
module.exports = {
  entry: {
    main: './src/main.js',
    vendor: './src/vendor.js'
  },
  // ...
};

缺點(diǎn)：需手動(dòng)管理重復(fù)依賴。

2. 動(dòng)態(tài)導(dǎo)入（Dynamic Imports）

使用 import() 語(yǔ)法實(shí)現(xiàn)按需加載：

// 觸發(fā)代碼分割
button.addEventListener('click', async () => {
  const module = await import('./module.js');
  module.doSomething();
});

Webpack 會(huì)自動(dòng)生成一個(gè)獨(dú)立的 chunk（如 1.bundle.js）。

3. 使用 SplitChunksPlugin 優(yōu)化

在 webpack.config.js 中配置：

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        priority: -10
      },
      common: {
        minChunks: 2, // 至少被兩個(gè)入口引用
        name: 'common',
        priority: -20
      }
    }
  }
}

二、Tree Shaking

1. 基本配置

• 使用 ES Modules（import/export）。
• 生產(chǎn)模式自動(dòng)啟用：

  mode: 'production', // 自動(dòng)啟用 Tree Shaking
  

• 開(kāi)發(fā)模式手動(dòng)啟用：

  optimization: {
    usedExports: true, // 標(biāo)記未使用代碼
    minimize: true,    // 刪除未使用的導(dǎo)出
  }
  

2. 配置 package.json

標(biāo)記模塊無(wú)副作用：

{
  "sideEffects": false // 或指定有副作用的文件，如 ["*.css"]
}

3. 避免破壞 Tree Shaking

• 避免使用 CommonJS（require）。
• 確保第三方庫(kù)支持 Tree Shaking（如 Lodash ESM 版本：lodash-es）。

三、異步加載模塊的注意事項(xiàng)

1. 加載順序與依賴

• 如果異步模塊依賴其他模塊，需確保依賴已加載：

  import('./dep.js').then(() => import('./module.js'));
  

2. 錯(cuò)誤處理

捕獲加載失?。?/p>

import('./module.js')
  .then(module => { /* ... */ })
  .catch(error => { /* 處理錯(cuò)誤 */ });

3. 預(yù)加載與預(yù)獲取

使用 Webpack 魔法注釋優(yōu)化加載策略：

import(/* webpackPrefetch: true */ './module.js'); // 空閑時(shí)預(yù)加載
import(/* webpackPreload: true */ './module.js');  // 高優(yōu)先級(jí)預(yù)加載

4. 公共模塊提取

避免重復(fù)打包公共代碼，通過(guò) SplitChunksPlugin 配置 minChunks 或 maxSize。

5. 性能監(jiān)控

使用 webpack-bundle-analyzer 分析 chunk 大小和依賴關(guān)系：

npm install --save-dev webpack-bundle-analyzer

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [new BundleAnalyzerPlugin()]
};

6. 用戶體驗(yàn)優(yōu)化

• 添加加載狀態(tài)提示（如 Loading 動(dòng)畫(huà)）。
• 使用 React/Vue 的異步組件（如 React.lazy + Suspense）。

總結(jié)

通過(guò)合理配置 Webpack，可顯著減少初始加載時(shí)間并提升應(yīng)用性能。