Curso de Webpack

Curso de Webpack

Thiago Vinicius Vieira

Thiago Vinicius Vieira

Exemplo prático de Lazy loading

22/25

Leitura

Para que possamos ver esse poderoso recurso em ação, utilizaremos a pasta 22 que está no github.

Neste projeto, desenvolvido e liberado para a comunidade gentilmente pelo Flávio, autor do livro “Cangaceiro Javascript”, podemos identificar um módulo chamado “NegociacaoService”.

E é este que será carregado sob demanda (ou seja, é nele que é aplicado o lazy loading).

O primeiro passo é removermos todas as importações estáticas do módulo realizadas em nossa aplicação.

Primeiro, verifique o arquivo client/app-src/domain/index.js, note que foi removida a importação do módulo.

Agora, note que em client/app-src/controller/NegociacaoController.js foi removida a importação de NegociacaoService logo no início da declaração do nosso módulo, inclusive não há a propriedade this._service , pois o serviço será carregado sob demanda:

Com auxílio da função System.import importou-se o módulo …/domain/negociacao/NegociacaoService .

O retorno de System.import é uma promise que nos dará acesso a um objeto que representa o módulo importado.

Toda a mágica ocorre na linha const negociacoes = await service.obtemNegociacoesDoPeriodo();

Execute o código. Através do terminal vamos executar o build de desenvolvimento, o mais rápido: npm run build-dev

Dentro da pasta client/dist existirá um novo arquivo bundle , o arquivo

0.bundle.js :

├── 0.bundle.js
├── 448c34a56d699c29117adc64c43affeb.woff2
├── 89889688147bd7575d6327160d64e760.svg
├── bundle.js
├── e18bbf611f2a2e43afc071aa2f4e1512.ttf
├── f4769f9bdb7466be65088239c12046d1.eot
├── fa2772327f55d8198301fdb8bcfc8158.woff
├── index.html
├── styles.css
└── vendor.bundle.js

Durante o processo de build, Webpack é inteligente o suficiente para saber que há um carregamento sob demanda de um módulo que não foi importado estaticamente por nenhum outro módulo da aplicação. Detectado o carregamento sob demanda, um novo bundle será criado com o código do módulo que será carregado apenas quando o usuário clicar no botão "Importar negociações", pois é na ação do método do controller chamado pelo botão que o módulo será carregado pela primeira vez. Se mais tarde clicarmos outras vezes no botão, nossa aplicação será automaticamente inteligente para saber que o módulo já foi carregado e não o baixará novamente. Podemos inclusive testar nossa aplicação através do Webpack Dev Server.

Pelo terminal, vamos subir nosso servidor com o comando: npm start

Ao acessarmos a aplicação através do endereço localhost:8080 ela continuará funcionando.

Comparações e alterações, Como ficou (esquerda - pasta “depois” do GitHub), e como era (direita - pasta “antes” do GitHub).

DICA: Se você não entende o código que está exposto na pasta 22 do GitHub sugere-se que você faça os cursos de React e JavaScript avançados para que compreenda bem o código antes de prosseguir.

Sugere-se, também, a leitura do livro “Cangaceiro Javascript”, confeccionando o projeto proposto desde o início do livro, para uma melhor compreensão dos contextos e conceitos de arquitetura de aplicação web expostos (api, client, server, controllers, DAO, etc.).

Contribuições 0

Perguntas 0

Ordenar por:

As contribuições, perguntas e respostas são vitais para aprender em comunidade. Registre-se ou faça login para participar .