VueJS Router Code Splitting

Code splitting is quite an interesting concept and can be used with vue router easily.

PS: This an advanced topic, so its important to have a good understanding of vue-router before reading this.

Let’s first understand what is the use of code splitting.

If we have large project with lot of components and we build via cli the final bundle.js file can become quite large. This can cause issue during first time loading of the page as sometimes the bundle js file might go into mb’s

In a large project we have many pages which are not useful for all user roles or it might be the case that few pages are used very rarely.

In the default build process, all components are bundled together and a final single js file is created. If this size of this js file is big, the initial load time of the website can be a lot.

What code splitting does is load routes lazily, which means when a particular page is loaded only then the components js file is loaded for it.  The build process divides entire bundle js file into different chunks and loads it depending on url which we open.

Let’s see this in action

First we can create a new project using vui cli and then create two components named “Home” and “About” and we can assign routes /home , /about to those.

The current code looks like this

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

export default new Router({
 mode: 'history',
 routes: [
   {
     path: '/',
     name: 'home',
     component: Home
   },
   {
     path: '/about',
     name: 'about',
     component: About
   
 ]
})

If we implement lazy loading on this,  the code looks like this now

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

function loadView(view) {
 return () => import(/* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`)
}

export default new Router({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: [
   {
     path: '/',
     name: 'home',1. 
     component: loadView('Home')
   },
   {
     path: '/about',
     name: 'about',
     component: loadView('About')
   }
 ]
})

Here what we have changed, following are the explanation

1. We have removed the static import of Home.vue (import Home from “./views/Home.vue“; )
2. We have created a loadView function to call the dynamic import of component.
3. In Route configuration  i have call the loadView function with name of file as string.

2 files (About.vue and Home.vue) that will be loaded on demand on production server.

Now if we build the app through “$ yarn build/ $ npm run buiild” we can see the difference of size of app.

Before add the Lazy-loading:

After adding the Lazy-loading:

As can be seen above, after code splitting the bundle is divided into different chunks and this reduces the initial bundle size.

 

The offical guide for code splitting can be seen here

https://ssr.vuejs.org/guide/routing.html#routing-with-vue-router