Expand description
Graph-based CSS chunking algorithm.
Selected by experimental.cssChunking: "graph" in Next.js. An alternative to the default
(“loose”) algorithm in super::style_groups.
§Pipeline
create_graph → make_acyclic → linearize → split_into_chunks → assemble batchescreate_graph— for each chunk group, the ordered list of CSS modules is converted into pairwise “later depends on earlier” edges in a directed weighted graph. Edge weights accumulate when the same(from, to)pair occurs in multiple groups.make_acyclic— co-occurrence almost always produces cycles. Each multi-node SCC has its lowest-weight edge cut until the graph is a DAG. Heavy edges represent strong co-occurrence and are preserved.linearize— Kahn-style topological sort with a tie-break: when several dependents become unblocked at once, the heaviest edge wins (and insertion order breaks ties among equal weights). This places strongly co-occurring modules adjacent in the global order.split_into_chunks— greedy bottom-up merger over the global order. At every active split point we score the merge ascost(merged) - cost(left) - cost(right)and take the most-negative score. We stop when no remaining merge would reduce cost.
§Cost model
Per chunk loaded by a chunk group:
cost_per_group(chunk, group)
= chunk_size
+ (chunk_size / group_total_size) * module_factor_cost
+ request_costwhere chunk_size is the sum of module byte sizes in the chunk and group_total_size is the
total CSS byte size of the chunk group. The total cost of a chunk is summed over the chunk
groups that load it (a group “loads” a chunk if it shares ≥ 1 module with it).
request_cost (in bytes — same unit as module sizes) charges for every CSS request a chunk
group makes. Larger values bias toward fewer, larger shared chunks.
module_factor_cost controls how much the algorithm cares about small chunk groups:
0distributes overshipped bytes evenly across chunk groups.- Higher values penalize overshipping in small chunk groups proportionally more, so small pages ship fewer unrelated styles at the expense of more requests overall.
§Constraints
max_chunk_sizeis enforced by treating any merge that would produce a multi-item chunk exceeding the cap as+infinitycost (single-item chunks larger than the cap are left alone).- Global CSS (
StyleType::GlobalStyle) must not leak into unrelated chunk groups: any merge that would put a global item into a chunk loaded by a chunk group not currently loading that item is treated as+infinitycost.
Functions§
- compute_
style_ groups_ graph - Build
StyleGroupsusing the graph-analysis algorithm. See the module-level docs for details.