Quando uma aplicação single page começa a crescer e ter mais componentes e telas para carregar, podemos utilizar uma estratégia para dividir a nossa aplicação em pedaços menores é o que chamamos de Code splitting e que sejam carregados à medida que o usuário navegar pela aplicação que é o que chamamos de Lazy Loading do inglês, carregamento preguiçoso.

Em aplicações Vue, isso se torna bastante simples e transparente para o usuário, sendo que não afeta a forma como a aplicação é desenvolvida, a única mudança expressiva será no momento de gerar o build para produção que terão mais de um arquivo de build.js, mas basta colocar todos no mesmo diretório no servidor e pronto, tudo continua funcionando perfeitamente.

Utilizando lazy loading no Vue.js

Vamos começar analisando o código que cria a rota dentro da aplicação. Veja o código:

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

import Login from './components/login/Login.vue';

export const routes = [
    { path: '', name: 'home', component: Home },
    { path: '/login', name:'login', component: Login },
    { path: '*', component: Home, menu: false }
];

Note que dessa forma todos os componentes serão invocados ao iniciar a aplicação.

No nosso caso queremos que parte da aplicação só seja carregada se o usuário requisitar. Dessa forma, para habilitarmos o code splitting e o Lazy Loading basta realizarmos uma pequena alteração em nosso arquivo routes.js.

Agora veja o código com a alteração para utilizarmos o recurso de carregamento preguiçoso:

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

const Login = () => System.import('./components/login/Login.vue');

export const routes = [
    { path: '', name: 'home', component: Home },
    { path: '/login', name:'login', component: Login },
    { path: '*', component: Home, menu: false }
];

Notou a diferença?

A única alteração é feita na linha 2 onde ao invés de utilizarmos o import Login from path, criamos uma variável const Login que recebe uma função do System.import( <path> ) e pronto nosso primeiro carregamento se tornará muito mais rápido dessa forma.

Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.