Skip to main content

Module style_groups_graph

Module style_groups_graph 

Source
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 batches
  1. create_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.
  2. 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.
  3. 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.
  4. split_into_chunks — greedy bottom-up merger over the global order. At every active split point we score the merge as cost(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_cost

where 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:

  • 0 distributes 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_size is enforced by treating any merge that would produce a multi-item chunk exceeding the cap as +infinity cost (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 +infinity cost.

Functions§

compute_style_groups_graph
Build StyleGroups using the graph-analysis algorithm. See the module-level docs for details.