· ai-devtools
Next.js 16.4 adds next-bundle-optimizer agent skill to reduce JavaScript bundles
Agents are now equipped with the capability to streamline JavaScript delivery in Next.js applications using the next-bundle-optimizer agent skill.
As application codebases expand, even minor alterations in how JavaScript modules reference one another can significantly affect how rapidly users can load and interact with the application. In Next.js version 16.1, the initial iteration of the Turbopack Bundle Analyzer was released, furnishing developers with insights into the JavaScript bundles of their applications. Now, with Next.js 16.4, we are providing your AI agent with the necessary instruments to examine these relationships and refine your bundles. At Vercel, agents have successfully pinpointed and reduced nearly two megabytes of superfluous compressed JavaScript across both v0 and vercel.com, with numerous crucial pages seeing savings amounting to hundreds of kilobytes. Let's explore the mechanics behind this process.
Next.js now incorporates an agent skill designed to automatically optimize the JavaScript bundles within your application. Because this skill leverages the detailed module graph, it necessitates the use of Turbopack, which serves as the default bundler starting with Next.js 16. To begin, you must update to Next.js 16.4 and then incorporate the next-bundle-optimizer skill using the command: `npx skills add vercel/next.js --skill next-bundle-optimizer`. Following this, execute the skill within your AI agent by entering `/next-bundle-optimizer`. This skill grants your agent access to Turbopack's module graph, allowing it to uncover import relationships that might be unexpected.
Consider a scenario where you attempt to delay the loading of a substantial component: `HeavyComponentLoader.js` might look like this: `'use client'; import { lazy } from 'react'; export const HeavyComponentLoader = lazy(() => import('./HeavyComponent'));`. If `HeavyComponentLoader` is the sole module importing `./HeavyComponent`, its code will be deferred. However, if any other module within the same bundle statically imports `./HeavyComponent`, that code will still load immediately. To detect problems such as this, the skill directs the agent to export snapshots generated by `next analyze` in JSON format and then reconstruct Turbopack's module and chunk graphs for querying purposes. You can export the graph data for your own custom tools using `next analyze export`. The agent then pinpoints large clusters of interconnected modules and assesses their influence on the bundle. It maps out their import chains and employs minimum cut to isolate a small selection of import boundaries that could facilitate deferring those modules. Subsequently, the agent verifies the suggested modifications against your source code and how the components are utilized interactively within your application. The agent also possesses the ability to locate and rectify issues. By default, the skill presents issues alongside suggested remedies. To implement these suggested changes, run `/next-bundle-optimizer fix`, then re-run the analysis, and compare the snapshots to quantify the resulting impact. After this, prompt your agent to generate a pull request for every modification made.
Putting the agent to practical use at Vercel involved auditing the v0 frontend, alongside the frontend for vercel.com. The agent swiftly uncovered numerous chances to lessen the compressed initial JavaScript across almost every page. In every instance, we instructed the agent to open a pull request, we validated the correction on a preview deployment, and then released it. Collectively, the agent has managed to conserve nearly two megabytes of compressed JavaScript across the pages in our applications, either by removing it completely or by postponing its loading until it is actually required.
The interactive bundle analyzer now features supplementary instruments enabling you to explore your application's bundles independently. To initiate the bundle analyzer, execute `next analyze` within the directory of your Next.js application.
To locate your most substantial routes, a new route summary homepage displays your largest client routes, providing an initial point for investigating bundle size. From this overview, you can open a specific route and sort the newly introduced table view by size to identify its most significant contributors. The table shows details such as Route resources, compressed size (estimated), and Source. For instance, `@example/blog-media` might comprise 2 modules and account for 30.0 kB behind an async boundary, while `components/code-block.tsx` contributes 22.0 kB to the initial load. Other entries include `components/search.tsx` with 18.0 kB across initial and async paths, `node_modules/@example/blog-markdown/parser.js` at 14.0 kB behind an async boundary, `lib/client-runtime.ts` at 12.0 kB for initial load, `components/related-posts.tsx` at 9.0 kB for initial load, `lib/table-of-contents.ts` at 9.0 kB for initial load, and `app/blog/[slug]/page.tsx` at 6.0 kB for initial load, with `app/blog/layout.tsx` contributing 3.0 kB for initial load, leading to a total estimated compressed size of 123.0 kB. You can sort the sources by size or expand a package to inspect its constituent modules.
The analyzer now automatically saves records of the analyses you conduct as your application undergoes modifications. By comparing these saved snapshots, you can gauge the effect of an optimization or investigate any increase in bundle size following a feature addition or dependency update. A comparison view can show a transition from an Original state to an Optimize rendering state, displaying a Table and a Treemap. For example, a total size change from 123.0 kB to 81.0 kB represents a reduction of 42.0 kB, with 0 sources added, 0 sources removed, 6 sources changed, and 4 sources identical.
The analyzer also highlights modules that reside on the critical render path and permits you to filter out asynchronous dependencies, thereby isolating only the code that loads synchronously for the initial rendering.
Should you wish to investigate your application's bundles using your agent, you can either try the analyzer or the optimizer skill, or you can learn more about the Next.js Bundle Analyzer.
Please test the analyzer and optimizer skill on your personal application and share your observations in the dedicated GitHub discussion. You can also find us through the following channels:
Why it matters
This tooling advancement directly impacts developer efficiency by automating complex bundle analysis, which is crucial for fast-loading applications. Developers can now leverage AI agents to proactively reduce JavaScript overhead without deep manual tracing of import chains.
