Difference between code splitting and chunking
Chunking is the bundler mechanism of dividing output into multiple files (chunks). Code splitting is the strategy/decision of where to split so code loads on demand. Chunking is the 'how', code splitting is the 'why/where' — every code split produces chunks, but the bundler also chunks automatically.
These terms overlap and are often used loosely, but there's a real distinction worth articulating: code splitting is the strategy; chunking is the mechanism.
Chunking — the bundler mechanism
A chunk is a unit of bundler output — one of the multiple JS files the bundler emits instead of a single monolithic file. Chunking is the process of dividing the dependency graph into those files.
The bundler chunks for several reasons, some automatic:
- Entry chunks — one per entry point.
- Vendor chunks —
node_modulesseparated out (so vendor code caches independently of app code). - Shared/common chunks — code used by multiple entry points, factored out to avoid duplication.
- Dynamic-import chunks — each
import()becomes its own chunk.
Chunking is configurable (webpack optimization.splitChunks, Rollup manualChunks) but also happens automatically.
Code splitting — the strategy/decision
Code splitting is the deliberate practice of structuring your app so code loads on demand instead of all upfront. It's the decisions: split by route, lazy-load this modal, defer that heavy library. You express it in code via dynamic import() (and React.lazy).
The relationship
- Every code split you author (a dynamic
import()) produces a chunk. So code splitting causes chunking. - But not every chunk comes from code splitting — the bundler also chunks automatically (vendor, shared, entry chunks) without you splitting anything.
- Code splitting = the why and where (a developer decision about load strategy). Chunking = the how (the bundler dividing output into files).
Analogy
Chunking is "the book is printed in multiple physical volumes." Code splitting is "I deliberately organized the content so you only need to pick up volume 3 when you reach that topic."
Why the distinction matters
- You can have chunking without code splitting — a bundler emits vendor + main chunks even if you never wrote a dynamic import.
- You do code splitting to get on-demand chunks that improve initial load.
- Talking precisely: "I added code splitting at the route level" (a strategy) "which produced a chunk per route" (the resulting mechanism).
How to answer
"Chunking is the bundler mechanism — dividing the output into multiple files (chunks), some of it automatic like vendor and shared chunks. Code splitting is the strategy: deliberately structuring the app with dynamic imports so code loads on demand. Code splitting produces chunks, but the bundler also chunks on its own. Code splitting is the why/where; chunking is the how."
Follow-up questions
- •Can you have chunking without code splitting?
- •What kinds of chunks does a bundler create automatically?
- •How do you control chunking in webpack or Rollup?
- •How does dynamic import() relate to both?
Common mistakes
- •Using the terms as exact synonyms with no distinction.
- •Thinking all chunks come from manual code splitting.
- •Not knowing vendor/shared chunks are automatic bundler behavior.
Performance considerations
- •Good chunking improves cache hit rates (vendor chunk stable across deploys) and avoids duplication. Code splitting shrinks the initial bundle. Both must be balanced — too many chunks add request overhead.
Edge cases
- •Over-splitting creating too many tiny chunks (request overhead).
- •Shared code duplicated across chunks if chunking is misconfigured.
- •Manual chunk config conflicting with automatic splitting.
Real-world examples
- •Route-based code splitting (strategy) producing one chunk per route (mechanism).
- •splitChunks separating React/vendor into its own cacheable chunk with zero dynamic imports written.