Otimizando sua aplicação Vue com Code Splitting
É comum que Single Page Applications (SPA’s) cresçam, e quando isso ocorre significa que o usuário irá precisar esperar ainda mais pelo carregamento inicial, uma vez que aplicações SPA todo o conteúdo da aplicação é carregado no primeiro acesso, mesmo que o usuário não utilize esses conteúdos secundários a sua principal intenção.
Tendo em vista essa consequente evolução de um projeto e também o crescimento de aplicações que são utilizadas em dispositivos móveis e com conexões móveis mais limitadas, é necessário que adotemos melhores práticas para aprimorar a experiência e performance destas mesmas.
Code Splitting
O Code Splitting vem se tornando cada vez mais indispensável nas aplicações SPA pelo fato de lidarmos diretamento com o carregamento e build de diversas partes de uma aplicação, possibilitando dessa forma quebrar o código da aplicação em vários pedaços e aprimorar assim uma experiência através de carregamentos dinâmicos e individuais.
Fazer o Code Splitting de uma aplicação é uma excelente maneira de aprimorarmos também o SEO, uma vez que quanto mais diminuirmos o tempo de carregamento, menor será a penalidade aplicada pelo Google ao indexar o site.
Saber quando e onde aplicar
A técnica é bem simples, consiste em alterarmos a forma como nossos componentes são importados e renderizados, utilizando de lazy loading nos componentes e separando eles no que são chamados de chunks (pedaços de código) dentro do webpack.
Porém, não devemos sair aplicando lazy loading em todos os componentes que vemos pela frente, caso isso aconteça podemos piorar ainda mais a experiência do usuário, imagine entrar em um site onde os componentes são carregados e mostrados em tela em momentos aleatórios. Portanto devemos saber bem onde e quando iremos fazer isso.
Antes de determinar onde aplicar devemos observar qual é o tipo do projeto, se ele é uma aplicação que possui diversas funcionalidades e rotas como em um CRUD ou se é simplesmente uma landing page por exemplo, onde se tem apenas algumas rotas mas um conteúdo muito extenso a ser exibido.
Tendo determinado o tipo de aplicação já conseguimos decidir se iremos aplicar outros métodos de Code Splitting além do convencional (Route-based code splitting), como em cenários em que podemos aplicar lazy loading em componentes que estão abaixo de uma dobra de uma landing page, por exemplo:
Analisando o exemplo acima podemos ver que existem certos componentes que não poderão ser renderizados de forma dinâmica, uma vez que eles fazem parte da primeira dobra do site. Porém também podemos observar que tudo aquilo abaixo da dobra pode ser renderizado de forma dinâmica, dessa maneira podemos então aprimorar o carregamento inicial do site ao aplicar o Code Splitting nesses componentes que não são exibidos de imediato em um primeiro acesso.
Aplicando Code Splitting em rotas
A maneira mais comum e eficaz de se aplicar Code Splitting em um projeto é através das rotas, isso porque geralmente estamos carregando a aplicação por inteiro no primeiro acesso, ou seja, se o projeto possui mais de dez rotas, o usuário terá de baixar todas essas páginas no inicio mesmo que não as utilize.
Podemos ver no exemplo abaixo como funciona o import dentro do sistema de rotas, onde não é baixado apenas o HTML de uma página, mas também todas as outras depêndencias de terceiros que irão ser utilizadas.
Dentro do Vue, ao utilizar a biblioteca vue-router para gerênciar rotas, geralmente possuimos um código semelhante ao abaixo, onde podemos declarar um array de vários objetos, sendo cada objeto uma rota diferente dentro da aplicação, com seus respectivos componentes sendo importados e definidos na propriedade component.
import Home from '@/pages/Home.vue';
import About from '@/pages/About.vue';const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
];
Para um simples projeto essa declaração não deve nos trazer nenhum problema, mas com o decorrer do crescimento dessas rotas podemos vir a ter vários gargalos de perfomance já que os componentes individuais não estão sendo importados dinâmicamente. Para resolver esse problema podemos fazer uma simples mudança no código para o modelo abaixo:
const Home = () => import(/* webpackChunkName: "home" */ './Home.vue');const About = () => import(/* webpackChunkName: "about" */ './About.vue');
Dessa forma estamos alterando o método de importação para a função de dynamic import do webpack, declarando assim que esses componentes são importados de forma assíncrona.
Com essa simples alteração evitamos que todas as páginas sejam baixadas no primeiro acesso, agora apenas o conteúdo da página acessada será baixado ao navegar pelas rotas do projeto.
Podemos também perceber que dentro da função possuimos o que é chamado de “Magic Comments”, esse comentário em especifico é utilizado para darmos identificação aos chunks da build, com essa identificação conseguimos abrir o network dentro do browser e confirmar que apenas o Javascript dessas páginas acessadas estão sendo baixadas.
Conclusão
Na FESC nós vimos essa necessidade de aprimorar o tempo de carregamento das nossas aplicações após perceber a quantidade de páginas que já haviamos desenvolvido e as diferentes jornadas existentes entre perfis de usuários. Através das técnicas de Code Splitting conseguimos então melhorar ainda mais o nosso carregamento inicial, evitando o download de conteúdos desnecessários para o usuário.
Não existem regras exatas de como devemos aplicar Code Splitting dentro dos projetos, o que existem hoje são apenas algumas práticas de arquitetura que já se tornaram bem eficazes na melhoria de performance — como o Route-based, mas você pode aplicar da maneira que melhor atender a sua aplicação.
