通过 Webpack 实现代码分割（Code Splitting）和 Tree Shaking 是优化前端应用性能的核心技术。以下是具体实现方法和注意事项：

一、代码分割（Code Splitting）

1. 入口起点分割

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

缺点：需手动管理重复依赖。

2. 动态导入（Dynamic Imports）

使用 import() 语法实现按需加载：

// 触发代码分割
button.addEventListener('click', async () => {
  const module = await import('./module.js');
  module.doSomething();
});

Webpack 会自动生成一个独立的 chunk（如 1.bundle.js）。

3. 使用 SplitChunksPlugin 优化

在 webpack.config.js 中配置：

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

二、Tree Shaking

1. 基本配置

• 使用 ES Modules（import/export）。
• 生产模式自动启用：

  mode: 'production', // 自动启用 Tree Shaking
  

• 开发模式手动启用：

  optimization: {
    usedExports: true, // 标记未使用代码
    minimize: true,    // 删除未使用的导出
  }
  

2. 配置 package.json

标记模块无副作用：

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

3. 避免破坏 Tree Shaking

• 避免使用 CommonJS（require）。
• 确保第三方库支持 Tree Shaking（如 Lodash ESM 版本：lodash-es）。

三、异步加载模块的注意事项

1. 加载顺序与依赖

• 如果异步模块依赖其他模块，需确保依赖已加载：

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

2. 错误处理

捕获加载失败：

import('./module.js')
  .then(module => { /* ... */ })
  .catch(error => { /* 处理错误 */ });

3. 预加载与预获取

使用 Webpack 魔法注释优化加载策略：

import(/* webpackPrefetch: true */ './module.js'); // 空闲时预加载
import(/* webpackPreload: true */ './module.js');  // 高优先级预加载

4. 公共模块提取

避免重复打包公共代码，通过 SplitChunksPlugin 配置 minChunks 或 maxSize。

5. 性能监控

使用 webpack-bundle-analyzer 分析 chunk 大小和依赖关系：

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

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

6. 用户体验优化

• 添加加载状态提示（如 Loading 动画）。
• 使用 React/Vue 的异步组件（如 React.lazy + Suspense）。

总结

通过合理配置 Webpack，可显著减少初始加载时间并提升应用性能。