Construindo o Futuro do JavaScript e do Angular Uma Exploração das Ferramentas de Build Rollup, ESBuild, Webpack e Vite

Nesta palestra vamos explorar as ferramentas de build JavaScript mais populares disponíveis atualmente para otimizar o desenvolvimento Angular: Rollup, esbuild, Webpack e Vite. Descubra como cada uma dessas ferramentas aborda o processo de construção, otimização e empacotamento de código Angular, e como elas podem transformar sua experiência de desenvolvimento e entrega de aplicações Angular

Transcript

1. Construindo o Futuro do JavaScript e do Angular Uma Exploração das Ferramentas de Build Rollup, ESBuild, Webpack e Vite
2. Whoami Daniel Bertolini Desenvolvedor de Software há +8 anos Arquiteto de Front End Tech Lead daniel-bertolini-correia Dan_Bertolini
3. Por que Existem Ferramentas de Build?
8. Compilação / Transpilação Bundling Otimizações de Pacote Minificação Tree Shaking Code Splitting Obfuscação Source Map HMR
9. Tipos de Build Modo Desenvolvimento Modo Produção Configurações propicias para o desenvolvimento Menor tempo de atualização de mudanças para melhor produtividade do desenvolvedor Permite realizar depuração (debug) utilizando as ferramentas de Desenvolvimento dos Browsers Logs detalhados de tudo, principalmente de erros Configurações propicias para entregar ao usuário final Remoção de código não utilizado (dead code) Otimizações para melhor performance Otimizações para melhor segurança
10. HMR Compilação / Transpilação Bundling Otimizações de Pacote Minificação Tree Shaking Code Splitting Obfuscação Source Map Tipos de Build Desenvolvimento Produção Live Reload Logging Local Web Server Build Cache Env Var
11. Compilação e Transpilação Compilador O processo de Compilar ou Transpilar consiste em traduzir um código escrito utilizando determinada notação mais moderna para uma notação a qual o local de destino do código seja capaz interpretar Isso envolve interpretar o código fonte para uma notação conhecida e então adequação para a notação alvo Alguns exemplos de transpiladores são o BabelJS e o TSC do Typescript
12. Bundling O processo de Bundling envolve a interpretação e agrupamento de arquivos do mesmo tipo, incluindo aqueles na node_modules, de forma que gere poucos pontos de saída otimizando a forma de consumir os bundles da aplicação Isso oferece as seguintes vantagens: Reduz a quantidade de arquivos a serem chamados e interpretados pelo Browser Remove duplicação de código das dependências em comum SCSS TS TS SCSS Bundler
13. Code Splitting Já processo de Code Splitting faz mais ou menos o oposto. Identificando possíveis oportunidades de quebrar o bundle final em pequenas partes que apenas serão carregadas sob demanda de forma assíncrona através de imports dinâmicos e técnicas de lazy loading
14. localhost Local Web Server Servidor Web que utiliza recursos da máquina do desenvolvedor para prover os recursos (JavaScript, HTML, CSS e imagens) de forma simplificada para testar antes de gerar o artefato final e implantar em um servidor de produção Além disso permite configurações que tornam o desenvolvimento mais produtivo como Live Reload, Hot Module Replacement e Proxy
15. localhost Live Reload Através do recurso de Live Reload as alterações feitas no código quando o Servidor Web Local está operando emitem um evento para o Browser realizar um recarregamento completo da aplicação
16. localhost Live Reload Através do recurso de Live Reload as alterações feitas no código quando o Servidor Web Local está operando emitem um evento para o Browser realizar um recarregamento completo da aplicação
17. Hot Module Replacement (HMR) localhost Similarmente ao Live Reload quando habilitado o uso de HMR as alterações feitas no código quando o Servidor Web Local está operando emitem um evento para o Browser que executa o download apenas dos chunks afetados e realiza um recarregamento parcial mantendo as partes não alteradas do jeito que estava
18. Hot Module Replacement (HMR) localhost Similarmente ao Live Reload quando habilitado o uso de HMR as alterações feitas no código quando o Servidor Web Local está operando emitem um evento para o Browser que executa o download apenas dos chunks afetados e realiza um recarregamento parcial mantendo as partes não alteradas do jeito que estava
19. Live Reload vs Hot Module Replacement (HMR)
20. localhost Proxy Como é utilizado um servidor de desenvolvimento local é possível criar proxies para chamadas HTTP ou consumo de recursos em tempo de desenvolvimento Com isso é possível: Redirecionar para APIs mock Desabilitar recursos de segurança Manipular as chamadas para otimizar a experiência de desenvolvimento
21. Source Maps Source Maps é uma capacidade de mapear o conteúdo de bundles compilados, e muitas vezes minificados, para algo mais próximo para a formatação do código-fonte original Sua principal finalidade é auxiliar na depuração de código ao utilizar as ferramentas de Desenvolvimento disponibilizadas pelos Browsers
22. Demais Otimizações Tree Shaking: Técnica para remover partes do bundle final que não são utilizadas. Principalmente dos módulos utilizados como dependência Minificação e Mangle: Processo de redução do tamanho de arquivos, especialmente de códigos JavaScript, CSS e HTML, removendo espaços em branco, comentários e renomeando variáveis para formas mais curtas Obfuscação: Técnica de segurança que envolve a transformação do código- fonte de um programa de forma a torná-lo difícil de entender.
23. Demais Otimizações Cache Hashing: Alteração do nome dos artefatos (bundles, chunks, estilos, assets) para conter um hash gerado para usufruir de recursos de cache do Browser ou de servidores de arquivos estáticos Otimização de Imagens e Fontes: Realiza melhorias em assets para torná- los otimizados sem perda de qualidade Compressão: Técnicas de compactação dos arquivos para otimizar o tempo de transferência pela rede
24. Webpack Rollup Vite ESBuild Ferramentas de Build
25. Comparativo de Popularidade
26. Menções Honrosas Speedy Web Compiler Grunt Bazel
27. Menções Honrosas
28. Webpack Module Bundler Open Source Mantido pela Comunidade Open Source Loaders & Plugins Forte Comunidade
29. Webpack: Loaders São mecanismos que auxiliam o Webpack a saber como interpretar diferente tipos de arquivos de modo a realizar as otimizações propostas Em outras palavras traduzem os conteúdos dos arquivos para JavaScript , realizam as otimizações possíveis e então traduzem novamente para um formato conhecido pelos Navegadores ou Runners Exemplos de loaders: ts-loader babel-loader style-loader file-loader TS Loader
30. Webpack: Plugins Plugin São ferramentas que realizam tarefas de otimização e manipulação de processos de construção Permitem que sejam feitas evoluções incrementais nos artefatos finais e também a inclusão de passos na geração do build para assegurar melhor qualidade Exemplos de plugins: HtmlWebpackPlugin CopyWebpackPlugin WebpackBundleAnalyzer ESLintWebpackPlugin
31. Webpack Prós Contras Pode lidar com diferentes tipos de assets Comunidade Ativa Alta gama de Plugins e Loaders Suporte nativo a ES6+ Alta Complexidade (mesmo na configuração inicial) Muito Tooling Documentação não tão simples Tempo de Build demorado
32. Webpack: Angular Para utilizar o Webpack em aplicações Angular basta utilizar os builders @angular-devkit/build- angular:browser e @angular-devkit/build- angular:dev-server no angular.json para builds em modo produtivo e de desenvolvimento, respectivamente Esses são os builders padrões desde que o Angular adotou o uso de builders na v6 e continuam sendo os mais utilizados
33. Webpack: Angular Outra opção é utilizar builders criados pela Comunidade, ou criar o seu próprio, que permitem receber uma configuração de Webpack customizada a ser mesclada com a configuração do Angular. As opções mais populares são o Custom Webpack e NGX Build Plus
34. Webpack: Diferenciais Module Federation Funcionalidade que permite separar bundles de determinadas dependências de forma a permitir compartilhar ou consumir de uma fonte externa ao bundle principal. Extremamente útil em um Arquitetura de Micro Front End
35. Webpack: Diferenciais Webpack Bundle Analyzer Não exatamente um recurso nativo mas uma excelente ferramenta para avaliar o bundle final e identificar os principais ofensores no quesito tamanho
36. Rollup Module Bundler Open Source Mantido pelo criador (Rich Harris) e pela Comunidade Open Source Plugins
37. Rollup: Plugins Plugin São ferramentas que realizam tarefas tanto de otimização e manipulação de processos de construção como também de interpretação de diferentes tipos de arquivos para torná-los compatíveis com JavaScript Exemplos de plugins: BabelPlugin TerserPlugin SassPlugin UrlPlugin TS
38. Prós Contras Eficiente e permite criar bundles menores Perfeito para realizar bundle de bibliotecas Configuração inicial simplificada Suporte nativo a ES6+ Tree Shaking mais eficiente Ecossistema limitado comparado as outras opções Não tão atraente para realizar bundle de aplicações Aumento da complexidade em projetos grandes Menos flexibilidade em cenários específicos Rollup
39. Rollup: Angular Infelizmente não há builders nativos ou de comunidade preparados para utilizar rollup em aplicações. Entretanto, para bibliotecas utilizand o Rollup basta utilizar o builder @angular- devkit/build-angular:ng- packgr no angular.json O ng-packagr é uma ferramenta desenvolvida pela comunidade Angular para criar pacotes do Angular em um formato compatível com o ecossistema de módulos npm
40. Rollup: Diferenciais Múltiplos formatos de exportação Não é exclusivo do Rollup, mas a flexibilidade para criar mais de um bundle e cada um em diferentes Module Systems como CommonJS (CJS), ES Module (ESM), UMD e AMD é um grande diferencial do Rollup CJS ESM AMD Essa capacidade unida ao poderoso Tree Shaking que o Rollup faz é o que faz dele a ferramenta perfeita para construir bibliotecas tanto Web quanto Node
41. ESBuild Module Bundler e Transpilador Open Source Mantido pelo seu criador (Evan Wallace) e pela Comunidade Open Source Recursos Nativos + Plugins Comunidade Crescente
42. ESBuild: Plugins Plugin Nativamente o ESBuild já possui uma forte capacidade de lidar com diferentes formatos de arquivos e realizar operações importantes na construção de aplicações. Porém, há um suporte para utilizar plugins como outros bundlers, sendo os plugins escritos em JavaScript Exemplos de plugins: BabelPlugin TerserPlugin SassPlugin UrlPlugin WASM
43. Prós Contras Velocidade de build extremamente alta Eficiente e permite criar bundles menores Simplicidade de Uso Muitos recursos nativos (ex.: interpretar Typescript e JXS/TSX) Agnóstico a Plataforma (Não depende de Node.js) Forte adoção pela comunidade Ecossistema de plugins com poucas opções (por enquanto) Não realiza checagem de tipos (necessário usar tsc --no-emit) Alguns recursos ainda precisam de aprimoramento para funcionar melhor (ex.: code splitting) ESBuild
44. ESBuild: Angular Desde a versão 16 do Angular foi criado o builder @angular-devkit/build- angular:browser-esbuild que pode substituir o builder padrão em Webpack e na versão 17 foi introduzido o @angular- devkit/build- angular:application que serve o mesmo próposito mas com um nome mais agnóstico e algumas configurações novas descorrelacionadas ao esbuild Para versões anteriores de Angular é possível utilizar o builder Custom Webpack com o ESBuild Loader para usufruir da transpilação veloz do ESBuild em projetos com Webpack
45. ESBuild: Diferenciais Altissíma Velocidade de Builds O principal fator que permite essa velocidade por ser desenvolvido em Go e por usar um algoritmo de compilação otimizado
46. Vite Ferramenta de Desenvolvimento ESBuild + Rollup Open Source Mantido pelo criador (Evan You), um time focado em sua evolução e pela Comunidade Open Source Plugins
47. Vite: Plugins Plugin Assim como outras ferramentas procura atender as necessidades nativamente mas o que foge do escopo agnóstico da ferramenta pode ser obtido através de Plugins Além disso é possível utilizar plugins do Rollup. Entretanto nem todos são compatíveis então deve ser avaliado a possibilidade de utilizar cada um deles na lista de Plugins Compatíveis Exemplos de plugins: VuePlugin ReacPlugin LegacyPlugin VUE
48. Prós Contras Velocidade de build alta por utilizar ESBuild para realizar um pre-bundling e transpilação otimizada Tamanho de bundle menor Muitos recursos nativos (ex.: interpretar Typescript e JXS/TSX) HMR otimizado para mudanças ao longo do tempo de desenvolvimento Suporte a JS Modules nativamente Ecossistema de plugins com poucas opções (por enquanto) Complexo para projetos maiores Incompatibilidade com dependências não distribuídas como ES Module (ex.: Common JS) Alguns recursos ainda precisam de aprimoramento para funcionar melhor (ex.: code splitting) Vite
49. Vite: Angular Ao utilizar os builders @angular-devkit/build- angular:browser-esbuild ou @angular-devkit/build- angular:application para o target de build e o @angular-devkit/build- angular:dev-server para o target de serve o Angular habilita o uso do Vite como servidor de desenvolvimento Por enquanto o Angular não utiliza o Vite para realizar builds produtivos. Sendo o principal motivo a incompatibilidade das capacidades atuais do Angular com o modelo de plugins do Rollup a qual o Vite se baseia
50. Vite: Diferenciais Bundle sob demanda Invés de consumir processamento computacional para realizar o bundle de todos chunks no momento de desenvolvimento, Vite realiza o bundle dos chunks conforme eles são solicitados pelo browser
51. Capacidades Webpack Rollup ESBuild Vite Local Web Server Sim Não Não Sim HMR Sim Sim Sim Sim Live Reload Sim Sim Sim Sim Source Map Sim Sim Sim Sim Build Cache Sim Não Sim Sim Logging Sim Sim Sim Sim Compilação/Transpilação Sim Sim Sim Sim Bundling Sim Sim Sim Sim Variáveis de Ambiente Sim Sim Sim Sim Code Splitting Sim Sim Sim Sim Comparativo de Capacidade
52. Capacidades Webpack Rollup ESBuild Vite Minificação Sim Sim Sim Sim Obfuscação Sim (usando plugins como Terser, UglifyJS, etc.) Não Necessário plugin adicional Sim Otimizações de Pacote Sim Sim Sim Sim Tree Shaking Sim Sim Sim Sim CSS Modules Sim Sim Sim Sim Pré-processadores CSS Sim (usando loaders como css-loader, sass-loader, etc.) Sim (usando plugins como rollup-plugin-postcss, etc.) Sim (usando plugins como esbuild-plugin-postcss, etc.) Sim (usando plugins como vite-plugin-postcss, etc.) Análise de Bundle Sim Sim Sim Sim Lazy Loading Sim (usando dynamic import) Sim (usando dynamic import) Sim (usando dynamic import) Sim (usando dynamic import) Cache Busting Sim Sim Sim Sim Multi-Page Application Sim Sim Não Sim Server-Side Rendering Sim Sim Não Sim Comparativo de Capacidade
53. Futuro das Ferramentas de Build Native Federation Maior gama de plugins e otimizações para as ferramentas Maior uso de tecnologias mais performáticas (Go e Rust) Zero Config Tools
54. Obrigado Dúvidas? daniel-bertolini-correia Dan_Bertolini