new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Vue · Guide · all subjects

performance/code-splitting

4 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Code splitting with dynamic imports

Code splitting is where a build tool splits the application bundle into multiple smaller chunks, which can then be loaded on demand or in parallel. Bundlers like Rollup (which Vite is based upon) or webpack can automatically create split chunks by detecting the ESM dynamic import syntax. With proper code splitting, features required at page load can be downloaded immediately, with additional chunks being lazy loaded only when needed.

Code splitting example with dynamic import

The following code demonstrates code splitting using dynamic import: function loadLazy() { return import('./lazy.js') }. The lazy.js file and its dependencies will be split into a separate chunk and only loaded when loadLazy() is called.

Lazy loading Vue components with defineAsyncComponent

In Vue applications, lazy loading can be used in combination with Vue's Async Component feature to create split chunks for component trees. Using defineAsyncComponent(() => import('./Foo.vue')) creates a separate chunk for Foo.vue and its dependencies, which is only fetched on demand when the async component is rendered on the page.

Lazy loading routes in Vue Router

For applications using Vue Router, it is strongly recommended to use lazy loading for route components. Vue Router has explicit support for lazy loading, separate from defineAsyncComponent.

Give your agent this brain