Bundle Size Report Exporter

Summary { .summary }

Create a Rollup build configuration that analyzes bundle sizes and exports the results to a JSON file for tracking purposes.

Description { .description }

You need to set up a Rollup build that generates a bundle size report in JSON format. The report should contain information about which packages are included in the bundle and their sizes.

Your build should:

1. Create a bundle from the provided source files
2. Analyze the bundle composition and sizes
3. Export the size data to a JSON file named bundle-report.json

The JSON report should contain an array of package entries, where each entry has:

• package: the name of the package or category (e.g., "lodash", "app", "rollup helpers")
• size: the size in bytes
• percentage: the percentage of total bundle size

The report should be sorted by size in descending order (largest packages first).

Constraints { .constraints }

• The output JSON file must be named exactly bundle-report.json
• The JSON structure must match the specification above
• Packages should be sorted from largest to smallest by size
• Percentages should be calculated as: (packageSize / totalSize) * 100

Dependencies { .dependencies }

rollup-plugin-sizes { .dependency }

Provides bundle size analysis capabilities for Rollup builds.

Test cases { .test-cases }

Test case 1: Verify rollup configuration { .test-case @test }

Input: Run node rollup.config.js to verify the configuration is valid JavaScript.

Expected output: No syntax errors.

Test case 2: Build and verify JSON report { .test-case @test }

Input:

npx rollup -c

Expected output:

• Build completes successfully
• A file bundle-report.json is created
• The JSON file contains an array with at least one entry
• Each entry has package, size, and percentage fields
• The size values are numbers
• The percentage values are numbers between 0 and 100

Test case 3: Verify report accuracy { .test-case @test }

Input: Read the generated bundle-report.json file.

Expected output:

• Packages are sorted by size in descending order
• The sum of all percentages is approximately 100 (allowing for rounding)
• All size values are positive numbers

Source files { .source-files }

rollup.config.js { .source-file }

The Rollup configuration file that sets up the build with size analysis and custom reporting.

src/main.js { .source-file }

import { sum } from 'lodash-es';

const numbers = [1, 2, 3, 4, 5];
const total = sum(numbers);

console.log(`Total: ${total}`);

export { total };

package.json { .source-file }

{
  "name": "bundle-size-reporter",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "build": "rollup -c"
  },
  "devDependencies": {
    "rollup": "^4.0.0",
    "rollup-plugin-sizes": "^1.1.0"
  },
  "dependencies": {
    "lodash-es": "^4.17.21"
  }
}