Comparison
Code splittingvsDynamic import
Code splitting
the settings screen's code is not downloaded until someone actually opens the settings screen.
Cutting the bundle so that code is only fetched when it is needed, usually along route or interaction boundaries. It is the highest-leverage size optimisation available because it removes code from the initial load without deleting anything. The cost is a request at the moment of use, so a split at the wrong boundary trades a slow first load for a stutter on every click.
Full entry →Dynamic import
you wrote `await import('./editor')` and the bundler quietly turned that line into a separate file.
The function-like `import()` form that returns a promise and is the mechanism every code split is built on. Because it is a syntactic marker, the bundler creates a chunk at that point whether or not you thought of it as a split. It returns the module namespace, so the default export arrives as `.default`, which is the source of the classic 'component is not a function' error.
Full entry →