Angular 9 - 即使在与 lodash-es 一起使用后，lodash 也会在产品包中导入答案

【问题标题】：Angular 9 - lodash is imported in prod bundle even after using with lodash-esAngular 9 - 即使在与 lodash-es 一起使用后，lodash 也会在产品包中导入
【发布时间】：2021-05-08 02:28:29
【问题描述】：

这是我在这里的第一个问题。我希望我会清楚！我正在开发一个 Angular 应用，版本 9.1.13。

在使用 webpack-bundle-analyzer 对我当前的产品包进行了一些分析之后，我发现 lodash 已完全加载到包中。所以我按照here 给出的解释来驱逐 lodash 并改用 lodash-es。

我现在可以在 prod 包中看到 lodash-es，但 lodash 也仍然存在。结果如下： new-bundle

我使用带有npm list --prod lodash 的lodash 查找了一些其他依赖项：我找到了一个（@angular/localize），根据link，它不应该对此负责

└─┬ @angular/localize@9.1.13
  └─┬ @babel/core@7.8.3
    ├─┬ @babel/traverse@7.12.13
    │ └── lodash@4.17.20  deduped
    ├─┬ @babel/types@7.12.13
    │ └── lodash@4.17.20  deduped
    └── lodash@4.17.20

我对如何解决这个问题没有任何想法。你有没有遇到过这个问题？

P.S.：以下是我的构建配置

        "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/co-investir-frontend/browser",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "aot": true,
        "assets": [
          "src/assets",
          "src/sitemap.xml",
          "src/robots.txt"
        ],
        "styles": [
          "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
          "src/styles.scss"
        ],
        "scripts": []
      },
      "configurations": {
        "production": {
          "index": {
            "input": "src/index.prod.html",
            "output": "index.html"
          },
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "5mb",
              "maximumError": "10mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "20kb",
              "maximumError": "30kb"
            }
          ]
        }
      }
    },

非常感谢您的帮助！

【问题讨论】：

标签： angular webpack lodash

【解决方案1】：

我最终发现一个外部库在其对等依赖项中提到了 lodash，导致 npm list --prod lodash 不返回其名称。

我能找到的唯一方法是使用 ngx-build-plus 并在 Angular CLI 使用的配置之上编写一个小的额外 webpack 配置。

// extra-webpack.config.yts
const webpack = require('webpack');

module.exports = {
    externals: {
        moment: 'moment'
    }
};

为应用程序提供服务确实显示来自该库的错误，要求lodash！

然后解决方案是让图书馆的所有者使用lodash-es，而不是他所做的lodash。

现在一切正常，lodash 不再包含在捆绑包中！

【讨论】：