Firebase CommonJS 或 AMD 依赖项可能导致优化救助

Question

在 Angular 10 更新后，我收到了有关 Firebase 和 CommonJS 或 AMD 依赖项的这些警告！

WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/src/app/app.component.ts depends on 'firebase'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/src/app/app.module.ts depends on '@angular/common/locales/fr'. When using the 'localize' option this import is not needed. Did you mean to import '@angular/common/locales/global/fr'? For more info see: https://angular.io/guide/i18n#import-global-variants-of-the-locale-data

WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/src/app/services/crud/crud.service.ts depends on 'lodash/dropRight'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/node_modules/@angular/fire/__ivy_ngcc__/fesm2015/angular-fire.js depends on 'firebase/app'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/node_modules/firebase/dist/index.cjs.js depends on '@firebase/app'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/node_modules/firebase/dist/index.cjs.js depends on '@firebase/database'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/node_modules/firebase/dist/index.cjs.js depends on '@firebase/firestore'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/node_modules/firebase/dist/index.cjs.js depends on '@firebase/functions'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/node_modules/firebase/dist/index.cjs.js depends on '@firebase/performance'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/node_modules/firebase/dist/index.cjs.js depends on '@firebase/remote-config'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Answer 1

要摆脱这些警告，您可以在您的angular.json.

"architect": {
        "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "allowedCommonJsDependencies": [
                            "lodash",
                            "firebase",
                            "@angular/common/locales/fr",
                            "lodash/dropRight",
                            "@firebase/app",
                            "firebase/app",
                            "@firebase/database",
                            "@firebase/firestore",
                            "@firebase/functions",
                            "@firebase/performance",
                            "@firebase/remote-config"
                        ],

我希望它对你有帮助。

Answer 2

当您使用与 CommonJS 一起打包的依赖项时，可能会导致应用程序变大变慢

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

这是官方文档 -配置 CommonJS 依赖项

您需要像这样更新 angular.json：

    "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "allowedCommonJsDependencies": [
        "firebase",
        "@firebase/app",
        "@firebase/database",
        "@firebase/firestore",
        "@firebase/functions",
        "@firebase/performance",
        "@firebase/remote-config",
        "@firebase/component",
        .... etc ...
     ]
     ...
    }
   ...
},

您可以在我之前的帖子中找到相同的答案 - /sf/answers/4382282411/