DEV Community

Cover image for Lazy loading in Vue
Rei Allen Ramos
Rei Allen Ramos

Posted on

10 1

Lazy loading in Vue

Today I was browsing Vue resources and stumbled upon Webpack's code splitting feature. Several links later, I found this video that demonstrates how seamless it can be done in Vue.

Webpack's Code splitting

Code splitting is the practice of bundling javascript files into small chunks. Lazy loading refers to how Webpack serves these chunks only when needed. When done correctly, they alleviate page loading time.

Example

For a given routes.js:

import Home from './components/Home.vue'
import MyProfile from './components/MyProfile.vue'
import About from './components/About.vue'

const routes = [
  {
    path: "/",
    name: "home",
    component: Home
  },
  {
    path: "/myProfile",
    name: "myProfile",
    component: MyProfile
  },
  {
    path: "/about",
    name: "about",
    component: About
  }
]

export default routes;
Enter fullscreen mode Exit fullscreen mode

This is most likely how your basics-to-vue-router tutorial has introduced routing and there's nothing wrong with it! However, we have Webpack at our disposal so let's use it to the fullest. Time to level up!

Lazy loading in Vue is literally just one line. Let's take "/myProfile" route and lazy load it by simply modifying the component property and converting it to an arrow function that imports the, err, component.

// before
component: MyProfile

// after
component: () => import( "./components/MyProfile.vue" )
Enter fullscreen mode Exit fullscreen mode

Hooray! 🎉 Another fancy term for this is dynamic imports. Behind the scenes, when we visit the root route "/home", Webpack served a bundled app.js file but set aside MyProfile.vue for later use. When the user visits "/myProfile" route, that's Webpack's cue to serve it.

Let's lazy load /about route too. The final routes.js should look like:

import Home from './components/Home.vue'

const routes = [
  {
    path: "/",
    name: "home",
    component: Home
  },
  {
    path: "/myProfile",
    name: "myProfile",
    component: () => import( "./components/MyProfile.vue" )
  },
  {
    path: "/about",
    name: "about",
    component: () => import( "./components/About.vue" )
  }
]

export default routes;
Enter fullscreen mode Exit fullscreen mode

I hope you noticed that we didn't lazy load the Home component because it defeats the purpose of code splitting. As a general rule of thumb, lazy load components that aren't needed on the landing page.

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post →

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Instrument, monitor, fix: a hands-on debugging session

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️