consider replacing lodash with lodash-es (fix warning "CommonJS or AMD dependencies can cause optimization bailouts.")

[saschaszott]

Description

Currently, dspace-angular uses lodash, which is a CommonJS module. This can lead to suboptimal tree shaking in Webpack, as CommonJS dependencies prevent full optimization.

Proposed Solution

Replace lodash with lodash-es, which is the ES Module (ESM) version of Lodash. This allows Webpack to eliminate unused code, reducing bundle size and improving performance.

[alanorth]

Thanks @saschaszott. This seems like an obvious improvement as lodash-es is a drop in replacement for lodash. Is there any way to measure it objectively? I built with lodash-es and didn't see a difference in the size of the generated JS.

[saschaszott]

@alanorth , good question. Could it be that dspace-angular is using other CommonJS modules? During the build, I see the message CommonJS or AMD dependencies can cause optimization bailouts multiple times.

[saschaszott]

At least two dependencies are problematic.

date-fns-tz

dspace-angular/package.json

Line 127 in a18e03d

"date-fns-tz": "^1.3.7",

We should consider upgrading to version 4 which is "ESM-first" (https://blog.date-fns.org/v40-with-time-zone-support/).

filesize

dspace-angular/package.json

Line 133 in a18e03d

"filesize": "^6.1.0",

Newer versions (v7+) of this library should support ESM.

[alanorth]

date-fns-tz is a different project than date-fns. I think that if we upgrade to date-fns 4.0.0 there are now native ways to handle time zones via @date-fns/tz or UTC via @date-fns/utc, so we can get rid of date-fns-tz. This needs some adaptation in code so is not a drop-in replacement.

filesize seems to be straightforward as long as we use v7+ like you said.

js-cookie is another one, but we will need to upgrade to 3.0.0 to get support for ES modules. This is not a drop-in replacement because there are changes to the API that require code changes.

Warning: /home/aorth/src/git/dspace-angular/src/app/core/services/client-cookie.service.ts depends on 'js-cookie'. CommonJS or AMD dependencies can cause optimization bailouts.

orejime is another one, and it seems to support ES modules as of v3.0.0, but they've also changed the packaging a bit, which will cause some other problems for us. Not a drop-in replacement.

Warning: /home/aorth/src/git/dspace-angular/src/app/shared/cookies/browser-orejime.service.ts depends on 'orejime/dist/orejime'. CommonJS or AMD dependencies can cause optimization bailouts.