Tree‑shaking vs Manual Chunks: Which Cuts Bandwidth for Low‑Traffic Pages?

Question

Goal
Minimize the amount of data transferred for a single page that receives a small number of visits per month.
Constraints & Uncertainty
Rollup removes unused ES module exports by default, but the extent of size reduction depends on side‑effect annotations and the presence of dynamic imports. Manual chunks can split the bundle into route‑specific pieces, increasing the HTTP request count unless served over HTTP/2. The trade‑off also varies across Rollup major versions; output.manualChunks defaults and behavior have shifted between v3 and v4.
Because the page is low‑traffic, the cost of additional requests may be negligible, yet the savings in initial payload could impact user experience on slow connections.
Unresolved Decision
It remains unclear whether the default tree‑shaking alone provides sufficient bandwidth savings, or whether manual chunking yields a measurable benefit that outweighs the extra request overhead.
Will tree‑shaking alone suffice to reduce bandwidth on a low‑traffic page, or does manual chunking provide a measurable benefit? How does the cost of additional HTTP requests balance against the savings in bundle size under HTTP/2? What Rollup version differences could affect this trade‑off?

Tasadduq Burney · Answer

For a low-traffic page, tree-shaking alone is usually sufficient if the resulting bundle is under 200 KB. Manual chunking only provides a measurable bandwidth benefit if you are importing large, heavy libraries that are not fully tree-shakable and you are serving the site over HTTP/2.

The Trade-off: Payload vs. Requests
Tree-shaking reduces the total amount of code sent by removing unused ES module exports. Manual chunking does not remove code; it redistributes it into separate files to reduce the initial payload of a specific entry point.

When Tree-shaking Suffices

Small Total Footprint: If your tree-shaken bundle is already small, the overhead of managing multiple chunks outweighs the negligible bandwidth savings.
  Pure ES Modules: If your dependencies are side-effect free and use static imports, Rollup's default behavior effectively minimizes the transfer size.

When Manual Chunking Adds Value

Heavy Non-shakable Dependencies: If you use libraries with side effects (where tree-shaking fails to remove unused code), moving them into a manual chunk prevents them from bloating the initial page load.
  HTTP/2 Environments: Under HTTP/2, the cost of additional requests is significantly lower (often 30–50ms). The trade-off generally favors chunking if the saved initial payload exceeds 5–10 KB per additional request.

Rollup Version Considerations
The behavior of output.manualChunks differs between major versions. In Rollup v3, splitting was more aggressive. Rollup v4 shifted toward splitting only when a module is shared by multiple entry points. If you are using v4, you may need to be more explicit in your manualChunks function to achieve the same isolation as in v3.

Verification Steps
To determine which strategy is working for your specific page, follow these steps:

Baseline: Run a build with default settings and use rollup-plugin-visualizer to identify the largest modules in the bundle.
  Test Chunking: Implement a manualChunks function to isolate the largest identified library into its own file.
  Network Analysis: Load the page in Chrome DevTools under a "Fast 3G" throttle. Compare the First Contentful Paint (FCP) and total transferred bytes between the two versions.

Missing Diagnostic: Are you using dynamic import() statements for any of the page's features? If so, those modules are already chunked by default, making manual chunking redundant for those specific assets.

Tree‑shaking vs Manual Chunks: Which Cuts Bandwidth for Low‑Traffic Pages?

Goal

Constraints & Uncertainty

Unresolved Decision

1 answer

The Trade-off: Payload vs. Requests

When Tree-shaking Suffices

When Manual Chunking Adds Value

Rollup Version Considerations

Verification Steps

Your perspective belongs here.

0 question comments