Code Splitting

Chunk Graph Recovery

chunk graph· 8 chunks · 71 KB total

chunk-manifest.json· webpack 5

{

"version": 5,

"chunks": {

"A1": { "modules": [842, 1294, 5418], "size": 12450 },

"B2": { "modules": [7733, 4081], "size": 8120 },

"C3": { "modules": [9956, 6325, 2107], "size": 14930 },

"D4": { "modules": [3318], "size": 4090 },

"E5": { "modules": [1782, 4456], "size": 6240 },

"F6": { "modules": [8901, 3217], "size": 9180 },

"G7": { "modules": [5544, 2891, 7102], "size": 11020 }

"imports": [

["entry", "A1", { "lazy": false }],

["entry", "B2", { "lazy": true, "name": "EditorPanel" }],

["entry", "C3", { "lazy": true, "name": "Sandbox" }]

]

}

RECOVERED · app/page.tsx

split

8 chunks · 3 static · 5 lazyperfect waterfall

Code Splitting

Webpack and rolldown split production code into chunks loaded on demand. yank reads the chunk manifest, identifies which modules each chunk holds, and emits real import() boundaries so Next.js does its own splitting on top. No double-loading, no orphaned code.