How I Cut a 2.1 MB JavaScript Bundle to 890 KB With Claude Code

The JavaScript bundle for a dashboard app had grown to 2.1 MB over three years, causing slow loading times on mobile devices. The Lighthouse performance score was only 41, and 11% of sessions on mobile bounced before the user could interact with the page.

The author used Claude Code, an AI tool, to analyze the project and reduce the JavaScript bundle size. However, the initial attempt gave generic advice and did not result in any meaningful improvements. The author then realized that the AI needed real build artifacts to provide accurate information.

To solve the problem, the author took the following steps:

1. Create a script in package.json that generates machine-readable stats about the build output and source maps, emitting a JSON file called bundle-report.json.

2. Prompt Claude Code to read the bundle-report.json file and identify the top 10 packages by bytes contributed to the bundle. For each package, the AI should find every import site in the src/ directory and determine if the import is needed at first paint or only reachable from a specific route, presenting the information in a table format.

3. Apply one change at a time, based on the insights gained from the AI's analysis. After making a change, re-run the build process, measure the new bundle size, and run tests. Commit the changes with a message that includes both the before and after sizes.

4. If the bundle size increased or tests failed, immediately revert the change.

By following this protocol, the author was able to reduce the JavaScript bundle size from 2.1 MB to 890 KB in about four working sessions. The author emphasized that this approach transformed the process of optimizing bundle size from a high-volume, low-creativity task to a more manageable and focused effort.