Diminuindo o tamanho do pacote Webpack com importações condicionais

Tugay ?lik Seguir Jul 14 · 3 min ler Imagem de https://webpack.js.org/

Existem várias ferramentas usadas para agrupar módulos ou recursos JavaScript. A maioria dos empacotadores possui um sistema de tremulação de árvores que limpa os módulos não utilizados antes de compilar todo o código e diminui o tamanho do pacote de acordo. Ou seja, remove qualquer código que não seja realmente usado pelo seu aplicativo.

Mas às vezes, mesmo se você não usar a funcionalidade, verá que uma biblioteca é incluída em seu pacote de saída de qualquer maneira. Você pode precisar carregar esse item apenas para situações específicas e não precisar dele no seu pacote principal.

Nessas situações, você pode procurar por carregamento de módulo dinâmico definindo uma importação de módulo dinâmico. Mas vamos verificar o que acontece quando tentamos fazer o seguinte:

 const DynamicModule = import (caminho / para / $ {dynamicModuleName} .js`) 

Quando você faz isso, o Webpack importa cada módulo dentro do path/to/* para o seu bundle e quando seu script é avaliado no lado do cliente, ele escolhe o requerido e executa. Por que o Webpack faz isso? Porque não é possível saber o valor da variável dynamicModuleName no momento da criação.

Bem, isso pode prejudicar nossa build geral. Digamos que você tenha um conjunto de alternância de recursos. Alguns dos recursos podem estar ativos ou passivos de acordo com seu status. Você não quer o código desse recurso quando ele é passivo.

Nesse ponto, o NormalModuleReplacementPlugin do webpack é útil. O que ele faz é simplesmente permitir que você substitua os recursos correspondentes.

De acordo com o nosso cenário, a implementação básica seguirá os passos abaixo:

Deve haver um .empty.js (você pode nomear como quiser) arquivo para seus módulos toggleable. Isso significa que se você tiver Module1 , também deve haver também o arquivo Module1.empty.js próximo ao módulo normal.

Os módulos vazios devem estar literalmente vazios, com apenas as exportações de classe, sem métodos, sem variáveis, sem dependências. Pode conter apenas algumas funções vazias que são usadas de forma dependente em outro módulo .

Por exemplo, digamos que no ModuleX você importe o Module1 e use o método C do Module1 . Neste caso, quando você carrega a forma vazia de Module1 , o aplicativo lançará um erro no lado do cliente, uma vez que não possui o método C correto? Para corrigir isso, você pode simplesmente criar um método vazio com o nome exato – que é o C no nosso caso – no Módulo1 .

Deve haver um arquivo de resolução para os módulos que podem ser marcados como vazios.

Devemos dizer ao plugin, substituir módulos normais como módulos vazios de acordo com seus status

Na última etapa da configuração do webpack, temos que ativar nosso plugin como abaixo

Vamos importar os módulos como normais e ver a saída de acordo com seus status.

Enquanto ambos os módulos estão marcados como ativos

Enquanto ambos os módulos estão marcados como passivos;