Angular项目CommonJS依赖优化：改用ECMAScript模块问询

我在Angular项目中使用部分库时收到如下警告：

...depends on 'core-js/modules/web.dom-collections.iterator.js'. CommonJS or AMD dependencies can cause optimization bailouts.

我已经在angular.json的allowedCommonJsDependencies中添加了相关依赖，但这个列表变得越来越庞大。请问如何正确使用ECMAScript模块（ESM）来解决这个问题？

以下是我的完整allowedCommonJsDependencies配置：

"allowedCommonJsDependencies": [
          "lodash",
          "uuid",
          "url",
          "buffer",
          "ulid",
          "camelcase-keys",
          "@aws-crypto/sha256-browser",
          "@aws-sdk/client-cloudwatch-logs",
          "@aws-sdk/client-lex-runtime-service",
          "@aws-sdk/client-lex-runtime-v2",
          "@aws-sdk/client-location",
          "@aws-sdk/eventstream-codec",
          "@aws-sdk/eventstream-marshaller",
          "isomorphic-unfetch",
          "js-cookie",
          "core-js/modules/es.array.index-of.js",
          "core-js/modules/es.array.iterator.js",
          "core-js/modules/es.array.reduce.js",
          "core-js/modules/es.array.reverse.js",
          "core-js/modules/es.promise.js",
          "core-js/modules/es.regexp.to-string.js",
          "core-js/modules/es.string.ends-with.js",
          "core-js/modules/es.string.includes.js",
          "core-js/modules/es.string.match.js",
          "core-js/modules/es.string.replace.js",
          "core-js/modules/es.string.split.js",
          "core-js/modules/es.string.starts-with.js",
          "core-js/modules/es.string.trim.js",
          "core-js/modules/web.dom-collections.iterator.js",
          "raf",
          "rgbcolor",
          "cookie",
          "jspdf-autotable",
          "@aws-crypto/crc32",
          "@aws-crypto/crc32"
        ],

解决方案：迁移到ECMAScript模块（ESM） #

1. 替换CommonJS模块为ESM兼容版本 #

• lodash：改用lodash-es（lodash官方ESM版本），按需导入单个方法而非整个库，比如import { debounce } from 'lodash-es'，既减少打包体积又避免CommonJS警告。
• uuid：升级到v9+版本（默认支持ESM），导入方式改为import { v4 as uuidv4 } from 'uuid'。
• url/buffer：浏览器环境下可直接使用原生API（如new URL()替代url模块），或使用url-esm、buffer-es6等ESM替代库。
• isomorphic-unfetch：替换为cross-fetch（支持ESM，API与原库一致），导入改为import fetch from 'cross-fetch'。
• core-js相关模块：确保使用core-js v3+，Angular CLI会自动处理polyfill，检查polyfills.ts是否有冗余的单个模块导入，移除后可删除allowedCommonJsDependencies中的所有core-js条目。

2. 优化AWS SDK使用 #

你当前使用的AWS SDK v3默认支持ESM，只需调整导入方式：

• 按需导入客户端和命令，避免导入整个包，比如import { CloudWatchLogsClient, PutLogEventsCommand } from "@aws-sdk/client-cloudwatch-logs"
• 升级到最新版AWS SDK v3，确保包的package.json中type字段为module。

3. 处理剩余依赖 #

• js-cookie：升级到最新版（已支持ESM），导入改为import Cookies from 'js-cookie'。
• jspdf-autotable：使用jspdf的ESM导出，或寻找支持ESM的版本，确保导入路径正确。
• raf/rgbcolor/cookie：优先寻找官方支持ESM的版本，若找不到，可临时用esbuild将其转译为ESM后导入，但建议长期替换为ESM兼容库。

4. 逐步清理allowedCommonJsDependencies #

每次替换一个模块后，从列表中删除对应的条目，测试项目运行是否正常且无警告，逐步缩减列表规模。

额外建议 #

• 在angular.json的projects.[你的项目名].architect.build.options中添加"esModuleInterop": true，提升混合模块的兼容性。
• 定期用npm outdated检查依赖更新，优先选择支持ESM的最新版本。

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