如何用Webpack构建可Tree-shake的ESM库？解决冗余依赖问题

一、Webpack配置针对性优化 #

1. 强制标记外部依赖 #

确保Webpack明确将未使用的依赖排除在打包范围外，在webpack.config.js中配置externals：

module.exports = {
  // ...其他配置
  externals: {
    '@aws-sdk/client-dynamodb': '@aws-sdk/client-dynamodb',
    'rxjs': 'rxjs',
    // 其他需要排除的外部依赖同理
  },
  output: {
    library: {
      type: 'module', // 明确输出ESM格式
    },
    environment: {
      module: true, // 启用ESM环境支持
    },
  },
  experiments: {
    outputModule: true, // 允许输出ESM模块（Webpack 5+）
  },
};

2. 开启完整Tree-shaking开关 #

Webpack的Tree-shaking需要多个配置配合生效：

• 确保mode: 'production'（开发模式下默认禁用Tree-shaking）
• 启用usedExports与sideEffects配置：

module.exports = {
  // ...
  mode: 'production',
  optimization: {
    usedExports: true, // 标记未使用的导出
    sideEffects: false, // 声明库无副作用代码（若有副作用需单独配置文件列表）
  },
};

同时在库的package.json中添加：

"sideEffects": false

3. 修复KikDynamoService的导入问题 #

问题根源大概率是KikDynamoService中的非类型导入被Webpack判定为“被使用”：

• 将依赖的类型导入改为import type，避免被Webpack视为实际引用：

// 错误写法
import { DynamoDBClient } from '@aws-sdk/client-dynamodb';
// 正确写法（仅类型导入）
import type { DynamoDBClient } from '@aws-sdk/client-dynamodb';

• 若KikDynamoService本身未被app-fe使用，仅保留类型导出：

// src/index.ts
export type { KikDynamoService } from './services/KikDynamoService';

• 若存在顶级副作用代码（如模块加载时直接实例化类），将其改为按需执行（比如封装成函数，仅在调用时执行）。

4. 优化模块解析逻辑 #

让Webpack优先读取ESM格式的依赖，提升Tree-shaking效率：

module.exports = {
  resolve: {
    mainFields: ['module', 'main'], // 优先取依赖的ESM入口
    extensions: ['.mjs', '.ts', '.js'], // 优先解析ESM后缀文件
  },
};

二、无需拆分库的替代方案：TSC + Rollup组合打包 #

既然TSC编译能得到符合预期的输出，可通过Rollup补充压缩、循环依赖检查等功能，同时保留ESM的Tree-shaking效果：

1. 安装依赖：

npm install rollup @rollup/plugin-typescript @rollup/plugin-terser rollup-plugin-circular-dependency --save-dev

2. 创建rollup.config.js：

import typescript from '@rollup/plugin-typescript';
import terser from '@rollup/plugin-terser';
import circularDependency from 'rollup-plugin-circular-dependency';

export default {
  input: 'src/index.ts',
  output: {
    dir: 'dist/esm',
    format: 'es',
    sourcemap: true,
  },
  external: ['@aws-sdk/client-dynamodb', 'rxjs'], // 排除外部依赖
  plugins: [
    typescript({ tsconfig: './tsconfig.esm.json' }), // 复用现有TS配置
    terser(), // 替代Webpack的TerserPlugin
    circularDependency({
      exclude: /node_modules/,
      failOnError: true, // 检测到循环依赖时抛出错误
    }),
  ],
};

3. 在package.json中添加打包脚本：

"scripts": {
  "build:esm": "rollup -c rollup.config.js"
}

三、问题定位工具 #

使用webpack-bundle-analyzer分析打包产物，精准定位未被排除的依赖来源：

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(), // 打包后自动打开分析页面
  ],
};

通过分析页面可查看哪些模块引入了AWS SDK或RxJS，进一步针对性修复。

内容的提问来源于stack exchange，提问作者OtaconKiko