I. Introdução
Ao construir um aplicativo por empacotamento, o pacote JavaScript se torna muito grande, afetando o carregamento da página. Conforme mostrado na figura, se o carregamento lento não for usado, nosso código de negócios estará no arquivo js no início do aplicativo. À medida que o negócio aumenta, a quantidade de código torna-se cada vez maior e o arquivo js fica cada vez maior O usuário visita a página pela primeira vez Pode haver uma breve tela em branco.
A função dos três arquivos js:
- Arquivo .js no início do aplicativo : código comercial escrito por você
- O arquivo .js no início do manifesto : fornece o suporte subjacente para o código empacotado. Por exemplo, usamos regras de exportação ES6 ou CommonJS no projeto e este arquivo js pode processar essas regras.
- Arquivos .js começando com fornecedor : código js de terceiros, como vue, código vue-roteador
- O arquivo index.html apresenta o arquivo .js no início do aplicativo
Dois, use o carregamento lento de roteamento
Se pudermos dividir os componentes correspondentes a diferentes rotas em diferentes blocos de código e, em seguida, carregar os componentes correspondentes quando as rotas forem acessadas , será mais eficiente. A principal função do roteamento do carregamento lento é empacotar os componentes correspondentes ao roteamento em blocos de código js . Roteamento de carregamento lento | Site oficial do Vue Router
Método de carregamento lento:
const Foo = () => import('./Foo.vue')
const router = new VueRouter({
routes: [
{
path: '/foo', component: Foo }
]
})
