GitLab

Atualmente usamos carregamento via promise, o que já é muito bom - o componente só é carregado se o router for acessado:

const router = createRouter({
  // ...
  routes: [
    { path: '/users/:id', component: UserDetails }
    // or use it directly in the route definition
    { path: '/users/:id', component: () => import('./views/UserDetails.vue') },
  ],
})

Adicionar os nomes de chunk, para criar um cache de carregamento (webpack):

const router = createRouter({
  // ...
  routes: [
    { path: '/users/:id', component: UserDetails }
    // or use it directly in the route definition
    { path: '/users/:id', component: () => import(/* webpackChunkName: "group-user" */ './UserDetails.vue') },
  ],
})

Ou com vite:

With Vite

In Vite you can define the chunks under the rollupOptions:
js

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      // https://rollupjs.org/guide/en/#outputmanualchunks
      output: {
        manualChunks: {
          'group-user': [
            './src/UserDetails',
            './src/UserDashboard',
            './src/UserProfileEdit',
          ],
        },
      },
    },
  },
})

https://router.vuejs.org/guide/advanced/lazy-loading.html