Escreva na frente
Recentemente, me deparei com algum carregamento de conteúdo em embalagens modulares angulares no trabalho. Eu senti que tinha algumas armadilhas no meio, então marquei aqui.
Antecedentes do projeto:
O projeto usa principalmente o AngularJS como a estrutura front-end. Quando o projeto foi lançado antes, todos os scripts front-end seriam embalados e compactados em um arquivo. Ele será carregado quando a página for acessada pela primeira vez, resultando em carregamento inicial lento da página. Nesta base, é proposto carregar sob demanda, ou seja, os scripts do módulo serão carregados apenas quando o usuário acessar um determinado módulo.
Ferramentas:
O projeto usa embalagens grunhidas de acordo com as especificações da AMD, usa o Grunt-Contrib-Requirejs para comprimir e mesclar módulos e usa Oclazyload para concluir o carregamento preguiçoso do módulo angular.
Processo do Projeto:
Embalagem do módulo
O código no projeto é basicamente escrito de acordo com a especificação da AMD, e o refrigerante-contrib-requirejs é usado para comprimir cada módulo em um arquivo JS.
Pergunta 1: No código do projeto, cada módulo contará com bibliotecas/serviços públicos de terceiros no projeto/instruções públicas no projeto. Se essa parte do conteúdo não for processada, o Grunt-Contrib-Requirejs carregará todos os módulos de que depende ao comprimir cada módulo e, em seguida, comprime-o no mesmo arquivo JS.
Resposta: Compressa a biblioteca de terceiros/serviços públicos e instruções em três módulos e remova-os usando "excluir" do script de embalagem de cada módulo. Como mostrado na figura abaixo:
Deve -se notar que o nome do módulo do módulo público precisa ter um arquivo JS com o mesmo nome no caminho correspondente.
Carga sob demanda
Depois de embalar o script nos arquivos JS por módulo, a próxima etapa é carregar módulos diferentes de acordo com as solicitações do usuário. O projeto usa o UI-Router para lidar com saltos de roteamento. Você pode começar da rota para completar o carregamento preguiçoso dos módulos.
O método específico é: quando o usuário opera o salto da rota, o módulo ao qual o usuário pertence é carregado de acordo com o estado que o usuário deseja pular. Com base nisso, um mapeamento entre o estado e o módulo precisa ser adicionado. No começo, é necessário carregá -lo com requerjs. Verificou -se que o script pode ser carregado, mas os controladores/serviços/filtros registrados no Angular não funcionam. A investigação constatou que serviços como controladores registrados pela Angular após chamar o método Bootstrap não serão chamados novamente. Com base nisso, o OclazyLoad é introduzido para carregar (o Oclazyload possui algumas injeções e modificações no código -fonte angular).
Até agora, o carregamento sob demanda foi basicamente implementado, mas ainda existem vários problemas:
Dependências do projeto entre módulos
Como existem fortes dependências entre os projetos entre alguns módulos, o processamento é adicionar dependências entre os módulos no arquivo de configuração. Antes de carregar um módulo, verifique se ele possui um módulo dependente. Nesse caso, o módulo dependente será carregado primeiro. Depois que o módulo dependente for carregado, o módulo atual será carregado.
Carregamento preguiçoso de instruções;
No Angular, $ compilar pode ser usado para implementar a interdependência entre as instruções. O processamento disso é configurar o nome da instrução e a dependência do módulo de instrução. Quando uma determinada instrução é usada, o módulo é carregado primeiro e, em seguida, o método de compilação é executado. Esta solução pode resolver a maioria das dependências de instruções.
A localização das instruções. A maioria dos projetos usa páginas longas, cada página longa é dividida em várias áreas e cada área é um comando. Haverá um problema ao usar a interceptação, ou seja, o tempo de carregamento de cada instrução é diferente. Os comandos que voltarem primeiro serão anexados ao DOM primeiro, resultando em incerteza no layout da página. A solução é usar o mecanismo de Deffer e, depois que todas as instruções são carregadas/compiladas, adicione a execução à árvore DOM.
Dependências entre as diretivas: também existem dependências do projeto entre as diretivas. A solução para isso é mesclar instruções interdependentes em um módulo e empacotá -las no mesmo arquivo de script. Esta solução pode resolver a maioria das dependências das instruções, mas não pode resolver as dependências durante o processo de inicialização. Pode haver uma certa instrução compilada e as dependências da instrução ainda não foram compiladas. Para um exemplo tão especial, apenas o script e o modelo são carregados quando a página é inicializada.
O exposto acima são os problemas encontrados ao longo do processo do projeto. Basicamente, toda vez que você avança, você está lutando com o poço. Muitas coisas são a primeira vez que você entra em contato com elas, e sinto que aprendi algo. As soluções para muitos problemas podem não ser muito claras. Outros encontraram todos os problemas acima. Desde que você use bem o mecanismo de pesquisa e leia/compreenda o código de outras pessoas, todos os problemas podem ser resolvidos com sucesso.
Algumas armadilhas sobre o carregamento angular preguiçoso são todo o conteúdo que eu compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.