8
respostas

Problemas com o code splitting and lazy loading

Olá,

Para mim não está funcionando o lazy loading do vue-cli.

Eu modifiquei o arquivo routes.js como o instrutor falou:

// import Cadastro from './components/cadastro/Cadastro.vue';
const Cadastro = () => System.import("./components/cadastro/Cadastro.vue");
import Home from './components/home/Home.vue';


export const routes = [
    {
        path: '',
        name: 'home',
        component: Home,
        titulo: "Home",
        menu: true
    },
    {
        path: '/cadastro',
        name: 'cadastro',
        component: Cadastro,
        titulo: "Cadastro",
        menu: true
    },
    {
        path: '/cadastro/:id',
        name: 'altera',
        component: Cadastro,
        titulo: "Cadastro",
        menu: false
    },
    {
        path: '*',
        component: Home,
        menu: false
    }
];

O comando npm run build construiu os arquivos 0.build.js e build.js, mas a página de cadastro http://localhost:8080/cadastro não carrega!

Alguém pode me ajudar?

Abraços,

Gilberto.

8 respostas

Fala ai Gilberto, tudo bem? Se você abrir o console do navegador, está dando algum erro? Se estiver, consegue copiá-lo e compartilhar comigo?

Fico no aguardo.

Oi Matheus,

Aparece a seguinte com o npm run dev:

npm run dev

Quando eu subo a versão de produção, não aparece qualquer mensagem:

npm run build

Abraços,

Fala Giberto, parece que por algum motivo o componente não está retornando o que precisava.

Sendo assim, vou te pedir um favor: Compartilha o projeto completo comigo, assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

Oi Matheus,

Eu assino o Dropbox. O link para o arquivo zipado é esse aqui: Vue.js final.

Se eu uso a seguinte versão do código (sem o code splliting e lazy loading), tudo funciona normalmente

 import Cadastro from './components/cadastro/Cadastro.vue';
//const Cadastro = () => System.import("./components/cadastro/Cadastro.vue");
import Home from './components/home/Home.vue';


export const routes = [
    {
        path: '',
        name: 'home',
        component: Home,
        titulo: "Home",
        menu: true
    },
    {
        path: '/cadastro',
        name: 'cadastro',
        component: Cadastro,
        titulo: "Cadastro",
        menu: true
    },
    {
        path: '/cadastro/:id',
        name: 'altera',
        component: Cadastro,
        titulo: "Cadastro",
        menu: false
    },
    {
        path: '*',
        component: Home,
        menu: false
    }
];

Obrigado,

Gilberto.

Fala Giberto, dei uma olhada no projeto, mas, não consegui rodar, deu varios erros por aqui.

Espero ter ajudado.

Entendi,

Não faz o mínimo sentido pagarmos, para um instrutor dizer que o meu código "tem vários erros", sem especificar quais nem se dar ao trabalho de explicar onde errei.

Se eu postei uma dúvida, obviamente "tem erros" no meu código e estou procurando ajuda.

Eu paguei a Alura justamente para ter ajuda, porque se for para ver vídeos eu assisto no youtube (gratuitamente).

Enfim.

Abraços,

Gilberto.

Fala Giberto, acho que talvez eu não deixei claro o porque da mensagem.

Eu mandei essa mensagem apenas informando você que estou vendo o projeto, mas, que no momento está dando varios erros.

Ou seja, informando que pode demorar para mim achar os problemas porque nem rodar está rodando, para manter você atualizado do andamento da situação.

Eu paguei a Alura justamente para ter ajuda, porque se for para ver vídeos eu assisto no youtube (gratuitamente).

Sobre esse ponto, eu acho que seria uma comparação não muito justa ao relacionar nossos cursos com videos do youtube.

E o mais importante de tudo é a gente manter a calma e nos comunicarmos de uma maneira tranquila, pois, o objetivo aqui é ajudar e chegar na solução do problema.

Abraços.

Fala Giberto, desculpa a demora, fiz o teste no teu projeto, fui no src/routes.js e troquei o import do ESModules para System:

Estava assim:

import Cadastro from './components/cadastro/Cadastro.vue';

Mudei para:

const Cadastro = () => System.import("./components/cadastro/Cadastro.vue");

Ficando:

// import Cadastro from './components/cadastro/Cadastro.vue';
const Cadastro = () => System.import("./components/cadastro/Cadastro.vue");

Ao subir o projeto, fui até a página de cadastro e tudo funcionou certinho, não deu problema nenhum, a página de cadastro foi carregada, até editei os componentes e títulos.

Talvez vale tu fazer o que eu fiz:

  • Remover a pasta node_modules e arquivo package-lock.json
  • Usar versão do Node 10.x
  • Instalar tudo de novo: npm i
  • Subir o projeto novamente: npm run dev

Fico no aguardo.