Code splitting e lazy loading em aplicação Vue

Postado em por Wolmir Cezer Garbin em Vue.js | 445 Visualizações
Última atualização em:

É interessante dividirmos o código da aplicação em pedaços que são carregados a medida que o usuário vai interagindo com a aplicação, neste post vamos como fazer.

Todo mundo tem algo para vender, AnuncieOn.com o melhor site de anúncios grátis de todo o Brasil. ABRIR

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.


Wolmir Cezer Garbin

Wolmir Cezer Garbin


Sou formado em Desenvolvimento de Sistemas para Internet pela faculdade Mater Dei e Pós graduado em Desenvolvimento de sistemas em Java pela UTFPR. Trabalho a mais de 9 anos com desenvolvimento em Java, Android e Web utilizando as principais tecnologias do mercado. Atuo como professor na faculdade Mater Dei, programador na Garbo Software e criador do Receitas de Código.

Ver mais

FIQUE POR DENTRO

Receba as novidades todo mês em seu e-mail!

Apoiadores


Publique seu post no Receitas de Código

Agora você pode publicar seu post no Receitas de Código e compartilhar seu conhecimento com muitas pessoas!

Quero publicar