How Code Splitting Makes Vue Apps Faster

In this lesson, learn how to split the JavaScript bundle into multiple chunks that are only sent to the browser when the user actually needs them. This approach is called “code splitting” or lazy loading. It is a simple yet extremely effective way of boosting performance in a Vue or Nuxt application.

Code splitting at the page level is a no-brainer and can be done easily with Vue router in a Vanilla Vue.js project. Routes are automatically code split in a Nuxt app.

Code splitting components is an approach to further break up code within a single page. Dynamically loading a code split component only when it’s shown (such as for a modal overlay component) saves precious milliseconds on initial page load since the code isn’t needed immediately needed.

Code splitting components in Vue can be done with defineAsyncComponent and in Nuxt with the Lazy component prefix.

Links

• Vue.js Docs - Async Comonents
• Nuxt Docs - Components - Dynamic Import
• Lazy Load Components in Vue with defineAsyncComponent
• The Lazy component prefix and when to use it - Nuxt Performance in Depth