Lazy Load no Vue

Olá dev, hoje o papo vai ser sobre Vue, mais especificamente sobre Vue Router.

Recentemente descobri um que existe duas formas de se fazer o router, a primeira, que carrega todos os módulos "páginas" no primeiro load e a outra que é onde cada módulo carrega conforme você acessa a página.

Vamos aos exemplos…

import {createRouter, createWebHistory} from "vue-router";
import LoginView from "../../vue/view/login/LoginView.vue";
import AboutView from "../../vue/view/about/AboutView.vue";

const routes = [
    {
        path: "/sobre",
        name: "about",
        component: AboutView
    },
    {
        path: "/login",
        name: "login",
        component: LoginView
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

Nesse exemplo, assim que carregar a página no primeiro load, vai ser carregado os módulos LoginView e AboutView, junto com todos os seus componentes internos.

A desvantagem dessa forma de utilizar essa forma é que o primeiro load fica com toda a carga dos módulos e componentes que estão sendo utilizados em qualquer rota do arquivo.

Em meus estudos recentes, onde eu estava melhorando o sistema de autenticação da minha aplicação no Vue, e me deparei com uma outra forma de se fazer isso, que basicamente você ira dar o import no atributo component, ficando assim.

import {createRouter, createWebHistory} from "vue-router";

const routes = [
    {
        path: "/sobre",
        name: "about",
        component: () => import("../../vue/view/about/AboutView.vue"),
    },
    {
        path: "/login",
        name: "login",
        component: () => import("../../vue/view/login/LoginView.vue"),    
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

Dessa forma, não damos o import no topo do arquivo, e o navegador vai carregar o módulo do LoginView e seus compoentes, somente quando a página de login for acessada.

Hoje o assunto era esse, algo rápido mesmo, até mais dev!