升级到 Angular 10 - 修复 CommonJS 或 AMD 依赖项可能导致优化救助

Posted 2023-02-16

【中文标题】升级到 Angular 10 - 修复 CommonJS 或 AMD 依赖项可能导致优化救助

【英文标题】：Upgrading to Angular 10 - Fix CommonJS or AMD dependencies can cause optimization bailouts

【发布时间】：2020-10-16 22:43:33

【问题描述】：

我正在尝试将我的 Angular 9 应用程序升级到 Angular 10 版本，但升级后收到以下警告

rxjs\BehaviorSubject.js depends on rxjs-compat/BehaviorSubject

知道如何解决这个问题吗？

【问题讨论】：

你能检查一下你是否曾经没有从 rxjs 导入，而是从 rxjs/behaviorsubject 导入。

@JonathanStellwag 我已经像这样导入了它 - import BehaviorSubject from 'rxjs' 并且对于 Angular 9 一切正常。但对于 Angular 10 却没有。我也面临地图操作员同样的问题 - 它说 ..\node_modules\rxjs\operators\map.js 中的警告取决于 rxjs-compat/operators/map。 CommonJS 或 AMD 依赖项可能导致优化救助。

这能回答你的问题吗？ Angular 10 Upgrade - Fix CommonJS or AMD dependencies can cause optimization bailouts

【参考方案1】：

建议您避免在 Angular 应用程序中依赖 CommonJS 模块。依赖 CommonJS 模块可以防止打包程序和压缩程序优化您的应用程序，从而导致更大的包大小。相反，建议您在整个应用程序中使用 ECMAScript 模块。仍然不关心捆绑大小，

要禁用这些警告，您可以将 CommonJS 模块名称添加到位于 angular.json 文件中的构建选项中的 allowedCommonJsDependencies 选项。

"build": 
  "builder": "@angular-devkit/build-angular:browser",
  "options": 
     "allowedCommonJsDependencies": [
        "rxjs-compat"
     ]
     ...
   
   ...
,

Source

【讨论】：

感谢您的回答。我仍然想知道是否有任何推荐的 ECMAScript 模块作为替代品？而不是禁用警告。

这并没有消除我的警告信息。

对我来说也是如此，我正在使用 lodash 并将其添加到“allowedCommonJsDependencies”但仍然是相同的警告。有什么想法吗？

@***User 请看看这个答案：***.com/a/62589268/5470544

虽然建议是正确的，但假设是我使用 CommonJS 或 AMD，而最常见的情况是我使用依赖于这些的 3rd 方库。

【参考方案2】：

当你使用一个用 CommonJS 打包的依赖时，可能会导致larger slower applications

从版本 10 开始，Angular 现在会在您的构建拉入其中一个捆绑包时向您发出警告。如果您已经开始看到有关您的依赖项的这些警告，请让您的依赖项知道您更喜欢 ECMAScript 模块 (ESM) 包。

这是官方文档 - Configuring CommonJS dependencies

在您的 angular.json 文件中查找构建对象并添加

allowedCommonJsDependencies

如下图-

"build": 
  "builder": "@angular-devkit/build-angular:browser",
  "options": 
     "allowedCommonJsDependencies": [
        "rxjs-compat",
         ... few more commonjs dependencies ... 
     ]
     ...
   
   ...
,

【讨论】：

@LeonardoRick 尝试为 firebase 依赖项添加类似内容：“allowedCommonJsDependencies”：[“firebase”、“@firebase/app”、“firebase/app”、“@firebase/functions”、“@ firebase/performance", "@firebase/remote-config", "@firebase/component" ]，在您的情况下，只需在现有列表中添加 '@firebase/component' 关键字，它应该可以工作。

@freedev 我已经更新了答案中的链接！你可以在这里找到一个很好的解释 - web.dev/commonjs-larger-bundles Cheers！

对于任何搜索应该添加文件的人 - angular.json 在项目的根目录中。

@MaximGeorgievskiy 好抓新手可能很难找到文件。我已经更新了同样的答案，谢谢！

工作 angular@12

【参考方案3】：

尝试将 rxjs 导入 rxjs/internal/operators 替换为 rxjs/operators。

例如：

import  catchError, retry  from 'rxjs/internal/operators';

与

import  catchError, retry  from 'rxjs/operators';

【参考方案4】：

对于 RXJS 库，您可以进行以下更改。

对于 'rxjs/internal/<anything>' 和 'rxjs/index' 等导入，只需将其替换为 'rxjs'。

对于'rxjs/internal/operators' 等导入，将其替换为@Janardhan Burle 的回答中提到的'rxjs/operators'。

或者只替换rxjs

【讨论】：

替换为 'rxjs' 对我有用，谢谢

是的。那应该做的工作。很高兴它可以提供帮助。

只用 'rxjs' 替换对我也有用，谢谢

【参考方案5】：

另一种情况是在构建过程中被警告的问题是在使用以下导入样式时使用来自rxjs 的BehaviorSubject：

import BehaviorSubject from 'rxjs/BehaviorSubject';

这会导致以下错误：

警告：my.service.ts 取决于“rxjs/BehaviorSubject”。 CommonJS 或 AMD 依赖项可能会导致优化救助。

改为从根模块导入，构建过程中不再出现警告：

import BehaviorSubject from 'rxjs';

【参考方案6】：

在我的情况下（更新到 TypeScript 版本 3.9.7 后）flatMap 已被弃用（来自rxjs/operators）。 这是mergeMap 的别名，所以我替换了：

import flatMap from 'rxjs/internal/operators';

到

import mergeMap from 'rxjs/operators';

【参考方案7】：

只需更改导入：

来自：

import BehaviorSubject from 'rxjs/internal/BehaviorSubject';

收件人：

import BehaviorSubject from 'rxjs';

【讨论】：

这只是抑制警告，还是这也有助于优化？

@liakoyras 这就是我们在 RxJS v6+ learnrxjs.io/learn-rxjs/subjects/behaviorsubject 中导入 BehaviorSubject 的方式

是的，我明白，我的问题是新方法是否仅有助于抑制编译器警告，或者 v6+ 确实是 rxjs 的新 ES6 模块化（而旧版本是 CommonJS）。

嗨@liakoyras 抱歉重播晚了。 RxJS 6 带来了模块化的改进、性能的提升和更容易调试调用堆栈。 RxJS 团队为使此版本尽可能向后兼容做出了扎实的努力。 auth0.com/blog/whats-new-in-rxjs-6

【参考方案8】：

我有不同的大型项目，其中包含不推荐使用的导入 'rxjs'，并创建此 script 以升级所有不推荐使用的导入

$ python3.6 replace_imports.py PATH_TO_SRC_DIR 

此脚本升级导入如"rxjs\/(internal|Observable|Subject|ReplaySubject|Subscription|BehaviorSubject)" 到 从 rxjs 导入 *

也尝试升级 rxjs-compat

【参考方案9】：

我有类似的问题（app.module.ts 依赖于 'ngx-google-places-autocomplete'），但许多答案对我没有帮助。

所以如果你有 x 依赖于 y，只需添加 y在“allowedCommonJsDependencies”中的 angular.json 文件中。

【讨论】：

这只会使警告静音，依赖项会将整个 commonjs 包含在您的捆绑包中，从而导致捆绑包大小超出所需