DevToolbox

Tracking Dependencies for Bundle Size Optimization

Compare package.json before and after a bundle optimization effort to verify heavy packages were replaced with lighter alternatives.

Performance

Detailed Explanation

Bundle Size Optimization Tracking

Reducing JavaScript bundle size improves page load times and user experience. The Package.json Diff tool helps you verify that your optimization changes are correct.

Common optimization patterns

dependencies:
  - moment: ^2.29.4                   [REMOVED - 72KB gzipped]
  + date-fns: ^3.0.0                  [ADDED - 5KB per function]
  - lodash: ^4.17.21                  [REMOVED - 25KB gzipped]
  + lodash-es: ^4.17.21              [ADDED - tree-shakeable]
  - aws-sdk: ^2.1400.0               [REMOVED - 2.7MB]
  + @aws-sdk/client-s3: ^3.400.0     [ADDED - individual client]

Optimization strategies visible in diffs

Strategy Diff Pattern
Replace with lighter alternative Removal + Addition
Switch to tree-shakeable version lodash -> lodash-es
Use individual packages aws-sdk -> @aws-sdk/client-*
Remove entirely Pure removal (use native APIs)
Move to devDependencies Removed from deps, added to devDeps

Measuring impact

After comparing package.json files, verify the actual bundle impact:

  1. Run npm run build on both versions
  2. Compare the output bundle sizes
  3. Use tools like webpack-bundle-analyzer or @next/bundle-analyzer
  4. Check that tree-shaking works correctly for new packages

Using the summary for reporting

The summary panel shows:

  • Removed count: Packages eliminated entirely
  • Added count: New lighter replacements
  • The net change indicates whether the optimization reduced total dependencies

Use Case

A performance engineer has replaced several heavy dependencies with lighter alternatives in a large Next.js application. They compare the before and after package.json files to create a report showing exactly which packages were swapped and share it with the team.

Try It — Package.json Diff

Open full tool →

Related Topics

Finding and Removing Unused Dependencies

Dependency Management

Tracking New Dependencies Added to a Project

Dependency Management

Major Version Upgrade: Detecting Breaking Changes

Version Analysis

Comparing Packages Across Monorepo Workspaces

Monorepo Management

Comparing npm Scripts Before and After Refactoring

Build Configuration