O que acontece ao importar módulos desnecessários no angular?

Ao dar manutenção em um código verifiquei uma série de importações de módulos que estavam sendo feitas sem que haja necessidade.

O que isso pode gerar?

Antes de responder a pergunta vamos ao código antigo.

import { NgModule } from '@angular/core';

import {
  InputStatusModule,
  AplsSectionModule,
  AplsSideMenuModule,
  AplsCommonModule,
  AplsCellAcoesModule,
  AplsCellFiltroModule,
  AplsPreloaderModule
} from '@apollus/common';

import {
  AplsRadioModule,
  AplsButtonModule,
  AplsTooltipModule,
  AplsTableModule,
  AplsSelectModule,
  AplsSortModule,
  AplsInputModule,
  AplsPaginatorModule,
  AplsCheckboxModule,
  AplsTabsModule,
  AplsProgressSpinnerModule,
  AplsMenuBoxModule
} from '@apollus-ngx/orfeu';

import { GestaoEpiMenuRouting } from '@apollus/modulos/so/telas/gestaoepi/gestao-epi-menu/gestao-epi-menu.routing';
import { GestaoEpiMenuComponent } from '@apollus/modulos/so/telas/gestaoepi/gestao-epi-menu/gestao-epi-menu.component';
import { GestaoEpiMenuGuard } from '@apollus/modulos/so/telas/gestaoepi/gestao-epi-menu/gestao-epi-menu.guard';
import { ResponsavelVisitanteModule } from '../resposavel-visitante/responsavel-visitante.module';
import { PessoasServicoModule } from '@apollus/modulos/cadastro/servicos/pessoas/pessoas-servico.module';
import { GestaoEpiConfiguracaoModule } from '../gestao-epi-configuracao/gestao-epi-configuracao.module';

@NgModule({
  declarations: [GestaoEpiMenuComponent],
  imports: [
    GestaoEpiMenuRouting,
    AplsSideMenuModule,
    AplsSectionModule,
    AplsCommonModule,
    AplsTooltipModule,
    AplsTableModule,
    AplsSortModule,
    AplsButtonModule,
    AplsInputModule,
    AplsPaginatorModule,
    AplsCellAcoesModule,
    InputStatusModule,
    AplsSelectModule,
    AplsCheckboxModule,
    AplsCellFiltroModule,
    AplsTabsModule,
    AplsPreloaderModule,
    AplsRadioModule,
    AplsProgressSpinnerModule,
    AplsMenuBoxModule,
    ResponsavelVisitanteModule,
    GestaoEpiConfiguracaoModule,
    PessoasServicoModule
  ],  
  providers: [GestaoEpiMenuGuard]
})
export class GestaoEpiMenuModule {}

Após refactoring o mesmo módulo ficou dessa maneira:

import { NgModule } from '@angular/core';

import { AplsCommonModule } from '@apollus/common';
import { AplsMenuBoxModule } from '@apollus-ngx/orfeu';
import { GestaoEpiMenuRouting } from '@apollus/modulos/so/telas/gestaoepi/gestao-epi-menu/gestao-epi-menu.routing';
import { GestaoEpiMenuComponent } from '@apollus/modulos/so/telas/gestaoepi/gestao-epi-menu/gestao-epi-menu.component';
import { GestaoEpiMenuGuard } from '@apollus/modulos/so/telas/gestaoepi/gestao-epi-menu/gestao-epi-menu.guard';
import { ResponsavelVisitanteModule } from '../resposavel-visitante/responsavel-visitante.module';
import { GestaoEpiConfiguracaoModule } from '../gestao-epi-configuracao/gestao-epi-configuracao.module';

@NgModule({
  declarations: [GestaoEpiMenuComponent],
  imports: [GestaoEpiMenuRouting, AplsCommonModule, AplsMenuBoxModule, ResponsavelVisitanteModule, GestaoEpiConfiguracaoModule],
  providers: [GestaoEpiMenuGuard]
})
export class GestaoEpiMenuModule {}

Ok! O que essas importações desnecessárias podem gerar além de linhas de códigos?

A imagem abaixo apresenta um comparativo das requisições (Antes e Depois).

DESEMPENHO

Tivemos uma diferença de 8,45 kb na transferência de dados. Pode parecer pouco, mas nós como bom programadores devemos pensar SEMPRE em otimização.

Agora respondendo a pergunta inicial ‘O que isso pode gerar?’

  • Linhas de códigos a mais
  • Tempo de build maior
  • Perda no desempenho

Ao trabalharmos com o conceito de Web Components temos a responsabilidade de carregar apenas aquilo que está sendo utilizado na tela.

Até a próxima. 🙂

Deixe uma resposta