2

This is my first question here. I hope I'll be clear! I am developing an Angular app, version 9.1.13.

After some analysis of my current prod bundle using webpack-bundle-analyzer, I discovered that lodash was completly loaded into the bundle. So I followed the explanations given here to evict lodash and use lodash-es instead.

I am able to see lodash-es in the prod bundle now BUT lodash is still there too. Here is the result: new-bundle

I looked for some other dependencies using lodash with npm list --prod lodash: I found one (@angular/localize) and it should not be responsible for this according to this 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

I don't have any ideas about how to solve this. Have you ever faced this issue?

P.S.: below is my build configuration

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

Many thanks for the help!

PEB
  • 41
  • 3

1 Answers1

2

I eventually discovered that an external library mentioned lodash in its peer dependencies which caused npm list --prod lodash not to return its name.

The only way I could find this was to use ngx-build-plus and write a small extra webpack config used on top of the one used by Angular CLI.

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

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

Serving the application did show errors coming from this library asking for lodash!

The solution was then to ask the owner of the library to use lodash-es instead of lodash which he did.

Now everything is working and lodash is no more in the bundle!

PEB
  • 41
  • 3