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

问题描述

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

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

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

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

└─┬ @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

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

PS：以下是我的构建配置

        "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"
            }
          ]
        }
      }
    },

非常感谢您的帮助！

标签： angularwebpacklodash

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

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

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

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

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

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

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

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

问题描述

解决方案

推荐阅读