Cookie Consent by Free Privacy Policy Generator 📌 Identify and fix bundle npm duplicate dependencies


✅ Identify and fix bundle npm duplicate dependencies


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

Modern web applications are becoming more complex and rely on an increasing number of dependencies. The larger the dependency tree is, the more likely it is to encounter version conflicts, bundle duplicate dependencies, ship unnecessary code, and negatively impact user performance.

On the front-end side, modern web applications include a median of 98 direct and transitive dependencies in the bundle, a growth of 108% in the last three years.

Why the bundle contains duplicate dependencies

When multiple other dependencies and/or the application depend on a package, npm resolves the dependency tree, and if a common version does not satisfy all the semver queries, it installs multiple instances of the same package. By installing multiple instances of the same dependency, npm meets the dependent package.json and avoids breaking existing functionality.

If the duplicate package is a front-end dependency, it is bundled multiple times. This increases the size of the bundle, negatively impacting the application's web performance and, in some cases, causing JavaScript runtime errors (ex: Duplicate React).

Resources:

Example

Here's an example of how the bundle can contain duplicate dependencies. In an application that depends on @ant-design/[email protected] (resolved to v4.7.0) and [email protected], npm installs two different instances of @ant-design/icons because [email protected] depends on @ant-design/icons@^4.7.0 (resolved to v4.8.1):

{
  "name": "example-app",
  // ... package information
  "dependencies": {
    "@ant-design": "4.7.0",
    "antd": "4.24.14"
  }
}
npm list @ant-design/icons

[email protected] repo
├── @ant-design/[email protected]
└─┬ [email protected]
  └── @ant-design/[email protected]

As a result, the bundle includes two versions of the same dependency:

Bundle analysis - duplicate packages

How to identify duplicate dependencies

RelativeCI analyzes the bundle stats modules data, extracts the list of bundled dependencies, and identifies duplicate dependency instances. It presents the information as custom insights, metrics, and a list that you can filter and sort to discover the regressions quickly.

Duplicate packages insight

The duplicate packages insight shows the status and result of the duplicate packages analysis, allowing you to easily identify when there are regressions (new duplicate instances) or improvements (removed duplicates). The insight information is available on the bundle analysis report summary, job list, and all the integration summaries.

Bundle analysis - duplicate packages insight
Bundle analysis - duplicate packages insight

Bundle analysis list - duplicate packages insight
Bundle analysis list - duplicate packages insight

GitHub Pull Request Comment - Duplicate packages insight
GitHub Pull Request Comment - Duplicate packages insight

Duplicate packages metric

The number of duplicate packages is shown as a distinct metric on the report summary, the job list, and all the integration summaries.

Bundle analysis summary - duplicate packages metric
Bundle analysis summary - duplicate packages metric

Bundle analysis list - duplicate packages metric
Bundle analysis list - duplicate packages metric

You can also use the metric as a condition on the GitHub Commit Status Review or the Slack notification.

Bundle analysis review flow
Bundle analysis review flow

Duplicate packages data

To see the list of duplicate packages, go to the Packages section of the bundle analysis report and filter the results by the Duplicate filter. This will give you an overview of all the duplicate dependencies and their impact on the bundle size.

Bundle analysis - packages
Bundle analysis - packages

How to fix npm duplicate dependencies

The appropriate strategies for resolving npm duplicate dependencies may vary depending on your setup, dependencies, and versions. However, the following methods can help you eliminate duplicate packages, reduce bundle size, and enhance your application's web performance.

Run npm dedupe

npm dedupe can help quickly fix any existing issues in the package-lock.json file by flattening the dependency tree and regenerating the package-lock.json.

For example, the app dependency depends on @ant-design/icons@^4.6.0, and the correct semver resolution should be 4.8.1, though the package-lock.json resolves to 4.6.0:

npm explain @ant-design/icons

@ant-design/[email protected]
node_modules/@ant-design/icons
  @ant-design/icons@"^4.6.0" from the root project

@ant-design/[email protected]
node_modules/antd/node_modules/@ant-design/icons
  @ant-design/icons@"^4.7.0" from [email protected]
  node_modules/antd
    antd@"^4.18.6" from the root projects

Running npm dedupe will correct the package-lock.json and remove the duplicate dependency:

npm dedupe
npm list @ant-design/icons
[email protected] repo
├── @ant-design/[email protected]
└─┬ [email protected]
  └── @ant-design/[email protected] deduped

Bundle analysis - duplicate packages - fixed using npm dedupe
Bundle analysis - duplicate packages - fixed using npm dedupe

Upgrade/downgrade to a common version

Another potential solution is to update and/or downgrade the dependency to a common version that the dependents can share.
In the example above, we can update the application version to v4.8.1, the same as the version resolved for antd. npm will resolve both dependencies to v4.8.1.

Updating a package version, especially a major version, can break existing functionality. Follow the change log of the dependency for changes, and make sure to test after the update.

npm install --save @ant-design/icons@^4.8.1
[email protected] repo
├── @ant-design/[email protected]
└─┬ [email protected]
  └── @ant-design/[email protected] deduped

Use npm overrides

The npm overrides configuration allows you to explicitly set package versions and override the npm resolution for any dependency, direct or transitive. In our example, we can override the resolved version of @ant-design/icons to 4.7.0.

Again, updating a package version, especially a major version, can break existing functionality. Remember to follow the change log of the dependency for changes, and ensure you test after updating.

{
  "name": "app",
  /* ... */
  "dependencies": {
    "@ant-design/icons": "^4.6.0",
    "antd": "^4.18.6",
    /* ... */
  },
  "overrides": {
    "antd": {
      "@ant-design/icons": "4.7.0"
    }
  }
}
npm list @ant-design/icons

[email protected]
├── @ant-design/[email protected]
└─┬ [email protected]
  └── @ant-design/[email protected] deduped

Use webpack configuration

Webpack allows dependency imports to be overridden at bundle time using the resolve.alias configuration option.

Don't forget that updating a package version, especially a major version, can break existing functionality. Always follow the change log of the dependency for changes and test after the update.

To point all the app imports of @ant-design/icons to the same version, we can add an entry to resolve.alias:

module.exports = {
  // ... webpack config
  resolve: {
    alias: {
      '@ant-design/icons': path.join(
        __dirname,
        'node_modules/@ant-design/icons',
      ),
    }
  }
};



[1]: Data based on open-source projects analyzed by RelativeCI



2020 2021 2022 2023
Median package count 47 52 95 98
Mean package count 46 76 130 138

This article was initially published on https://relative-ci.com/documentation/guides/identify-and-fix-bundle-npm-duplicate-dependencies

...

✅ Identify and fix bundle npm duplicate dependencies


📈 70.53 Punkte

✅ Duplicate File Finder Remover 7.0.5 - Professional duplicate finder and cleaner.


📈 32.98 Punkte

✅ Take This Unique Quiz About Duplicate Indexes In MySQL | pt-duplicate-key-checker


📈 31.47 Punkte

✅ Managing Dependencies in Node.js: An Overview of NPM and Yarn


📈 29.59 Punkte

✅ Building NPM packages for CommonJS with ESM dependencies


📈 28.08 Punkte

✅ BigID’s data minimization capabilities enable organizations to identify duplicate data


📈 27.91 Punkte

✅ pyWhat - Identify Anything. Easily Lets You Identify Emails, IP Addresses, And More...


📈 25.85 Punkte

✅ Medium CVE-2020-7614: Npm-programmatic project Npm-programmatic


📈 23.41 Punkte

✅ Simplifying Your Workflow: npm run vs npm --run


📈 23.41 Punkte

✅ Snyk - CLI And Build-Time Tool To Find & Fix Known Vulnerabilities In Open-Source Dependencies


📈 23.19 Punkte

✅ The power of forwardRef to fix circular dependencies 🔄 in Angular


📈 21.68 Punkte

✅ How to Fix Microsoft Teams Duplicate Login Error [Guide]


📈 21.04 Punkte

✅ Duplicate Unique Key Error in Wow: How to Fix It in 5 Steps


📈 21.04 Punkte

✅ How To Fix Oplog Restore Error: E11000 Duplicate Key Error Collection Using Percona Backup for MongoDB


📈 21.04 Punkte

✅ Snyk boosts prioritization capabilities to help development teams identify and fix critical vulns


📈 18.99 Punkte

✅ Lightspin Launches Remediation Hub to Identify and Fix Cloud Security Threats


📈 18.99 Punkte

✅ Identify and Fix XSS Vulnerabilities in Your Web App


📈 18.99 Punkte

✅ Gemini II 2.9.8 - Locate and eliminate duplicate and similar files.


📈 18.76 Punkte

✅ Ubuntu: added both intel-microcode and amd64-microcode as dependencies at the same time


📈 17.88 Punkte

✅ can anyone help me with CLAMAV virus scanner installation and dependencies?


📈 17.88 Punkte

✅ Library Dependencies and the Open Source Supply Chain Nightmare


📈 17.88 Punkte

✅ Mocking Dependencies and Verifying Behavior - Moq Overview (6 of 12) | Automated Software Testing


📈 17.88 Punkte

✅ Mocking Dependencies and Verifying Behavior - Applying Moq (7 of 12) | Automated Software Testing


📈 17.88 Punkte

✅ Testing your inputs and dependencies like a boss


📈 17.88 Punkte

✅ static-wine32 is Wine with statically linked dependencies and using link-time optimization


📈 17.88 Punkte

✅ Knip: An Automated Tool For Finding Unused Files, Exports, And Dependencies


📈 17.88 Punkte

✅ Pesky common issues developers have with most dependencies and how MDB fixes them #1


📈 17.88 Punkte

✅ Pesky common issues developers have with most dependencies and how MDB fixes them #2


📈 17.88 Punkte











matomo

Datei nicht gefunden!