Code splitting e lazy loading em aplicação Vue
É 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.
Última atualização em: | 3824 Visualizações
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.