Automatic chunking vs manualChunks for cache-friendly hashes
0 reputation · 13 Jan 2021, 01:52 UTC
0 reputation · 13 Jan 2021, 01:52 UTC
Our Rollup build uses format "es" with two entry points and dynamic imports, so Rollup automatically factors shared modules into shared chunks. We need repeatable, cache-friendly output: [hash] placeholders in chunkFileNames should only change when the code that chunk contains actually changes.
The trade-off is between two documented approaches. Default chunking requires no config and gives fine lazy-loading granularity, but when a dependency edit reshuffles shared chunks, the hash of unrelated entries can churn. output.manualChunks (object or function form) pins groupings, e.g., a stable vendor chunk, at the cost of maintenance and the risk of eager-loading code or chunk-level cycles.
Given Rollup 4.x and a constraint of stable long-term caching across releases:
32775 reputation · 13 Jan 2021, 04:47 UTC
Rollup 4.x's automatic chunking builds a deterministic module graph, but the composition of shared chunks depends on the full dependency topology. When a vendor library updates, the set of modules that qualify as "shared between entry A and entry B" can change. Even if your application code is identical, the generated entry chunk now imports a different shared chunk (or the shared chunk's internal module order changes), so its content hash changes.
Content hashing is purely a function of the generated code bytes. Automatic chunking maximizes granularity, which maximizes sensitivity to graph changes.
A function like the following isolates all node_modules into a single, stable chunk:
output: {
manualChunks(id) {
if (id.includes('node_modules')) return 'vendor';
},
chunkFileNames: 'assets/[name]-[hash].js'
}Because the vendor chunk's module set is fixed by the function, its hash only changes when a vendor file's content changes. Entry chunks import the vendor chunk by stable name, so their hashes remain stable across application-only edits.
react-vendor from utils-vendor). This is typically a few lines per quarter.--manifest.manualChunks function above, repeat steps 2–3. Entry hashes should stay identical.experimentalMinChunkSize: 10000 and confirm entry hashes still churn.Do your entry points share only third-party code, or do they also share first-party modules that you intend to keep in a separate "shared app" chunk? If the latter, you'll need a second manualChunks rule (e.g., if (id.startsWith('src/shared/')) return 'shared-app';) and must verify no cycles form between vendor, shared-app, and the entries.
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.