Next.js 16.4 adds a skill to cut excess JavaScript

Next.js 16.4 lets coding agents identify unnecessary JavaScript and suggest changes to reduce the amount browsers download. The next-bundle-optimizer skill uses Turbopack's module graph to find import relationships that pull code into the initial bundle. The safest approach is to start with its report, inspect the proposed fixes and measure the results before accepting any changes.

Vercel announced the skill on 28 October 2026, alongside improvements to the interactive Bundle Analyzer. Developers can now inspect their heaviest routes, compare saved analyses and focus on code required for the initial render.

An unexpected import can defeat lazy loading

The JavaScript delivered by a Next.js application depends heavily on how its modules import one another.

Dynamic imports can defer a component until it is needed. However, if another module in the same bundle imports that component statically, the code may still be loaded upfront.

This becomes harder to spot as applications grow. A shared utility or component registry can introduce dependencies that developers would not expect to affect unrelated pages.

According to the Next.js announcement, next-bundle-optimizer examines Turbopack's module graph to trace these relationships and identify places where dependencies could be separated.

The purpose is to reduce JavaScript loaded before it is needed, while preserving the behaviour users expect from the application.

Install the skill and run it without changing code

The optimizer requires Next.js 16.4 and Turbopack. Check your project version and bundler before attempting to use it.

The installation command published by Next.js is:

npx skills add vercel/next.js --skill next-bundle-optimizer

Once installed, invoke it from a compatible coding agent:

/next-bundle-optimizer

The default mode only reports findings and suggested fixes. It investigates the module graph without automatically applying the proposed changes.

That makes it suitable for an initial audit of an existing project. You can identify suspicious imports, understand their impact and decide whether the proposed modifications are appropriate.

Once you have reviewed the report, the skill also supports:

/next-bundle-optimizer fix

This mode applies the suggested changes, runs the analysis again and compares the before-and-after results, as described by Vercel and Programming Hero.

Avoid applying fixes to production code without testing. Moving code behind a loading boundary may improve bundle size while changing when a component becomes available.

Clear instructions for coding agents help establish which files they may edit and which checks must pass. Our article on using AGENTS.md to guide coding agents covers that approach.

Use next analyze when the problem is already visible

An AI agent is not necessary for every bundle investigation.

If you have recently added a large dependency or already know which route has grown, the interactive analyzer may provide everything needed to investigate the problem.

Run next analyze in the Next.js application directory to open the Bundle Analyzer.

The latest improvements described by Next.js make manual investigation more useful:

• Largest-route summary: identifies the client routes with the heaviest bundles.
• Saved snapshots: allows developers to compare bundle sizes across changes and inspect their impact.
• Critical render path view: separates synchronously loaded JavaScript from asynchronous dependencies that do not need to load immediately.

These views provide a way to investigate specific dependencies without asking an agent to modify the application.

They are also useful after an automated fix, when the important question is whether the initial loading requirements have genuinely changed.

Vercel reports reductions across its own applications

Vercel tested the optimizer on v0 and vercel.com, reporting that it removed or deferred nearly 2 MB of compressed JavaScript across pages in those applications.

The published Next.js case studies include the following examples:

Some changes removed unnecessary modules from the initial bundle. Others delayed loading until users interacted with the relevant feature.

These figures describe Vercel's own applications. They should not be treated as expected savings for an unrelated website.

Interactive 3D websites need particular attention to loading boundaries

Websites containing 3D viewers, product configurators or interactive experiences often depend on substantial rendering libraries.

A page may contain a viewer that users only open after clicking a button or selecting a product. In that situation, it is worth checking whether the viewer's JavaScript is being downloaded before the interaction occurs.

The optimizer can identify import relationships that prevent this code from being deferred. The manual analyzer can then show whether those dependencies still appear on the initial render path.

JavaScript is only part of the performance picture, however. The weight of 3D models, textures and other graphics must be assessed separately.

Our article on the practical limits of mobile 3D viewers explores those considerations. It is also worth reviewing older compatibility dependencies, as discussed in building modern websites without unnecessary polyfills.

Check the results before accepting an automated fix

This week, run the optimizer in reporting mode on a heavy route, review its findings and compare the bundle before accepting any changes. If you need to improve a website containing interactive features or a 3D viewer, tell Contrast 3D which parts of your application are loading unnecessary code.