Code splitting e lazy loading em aplicação Vue

Postado em por Wolmir Cezer Garbin em Vue.js | 74 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.

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 (Code splitting) e que sejam carregados à medida que o usuário navegar pela aplicação (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.

Alteração para utilizar lazy loading

Tenho uma ótima notícia para você, para habilitarmos o code splitting e o Lazy Loading basta realizarmos uma pequena alteração em nosso arquivo routes.js. Veja o código natural que foi criado:

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 }
];

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?

Exatamente, 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.

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

Posts relacionados


Code Conference

Esta é uma conferência de código realizada na cidade de Pato Branco para dissiminar tendências e informações sobre programação e novas tecnológias

Veja mais sobre o Code Conference

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