Pacotes para aplicativos da Web modernos
Os aplicativos modernos da Web geralmente usam uma ferramenta de agrupamento para criar um "pacote" de arquivos de produção (scripts, folhas de estilo etc.) que é otimizado, reduzido e pode ser transferido por download em menos tempo pelos usuários. Em Otimização de desempenho da Web com webpack, mostraremos como otimizar os recursos do site de maneira eficaz usando o webpack. Isso pode ajudar os usuários a carregar e interagir com seus sites mais rapidamente.
![Logotipo do Webpack.](https://web.developers.google.cn/static/articles/webpack/image/webpack-logo.png?authuser=5&hl=pt-br)
O webpack é uma das ferramentas de agrupamento mais usadas atualmente. Aproveitar os recursos para otimizar códigos modernos, dividir scripts em partes críticas e não críticas e remover códigos não utilizados (para nomear algumas otimizações) pode garantir que o app tenha um custo mínimo de rede e processamento.
![Antes e depois de aplicar otimizações
JavaScript. O tempo para interação da página foi aprimorado](https://web.developers.google.cn/static/articles/webpack/image/before-after-applying-ja-4050ad9acad04.png?authuser=5&hl=pt-br)
Inspirado na ferramenta Code-spliting in Bundle Buddy de Susie Lu
Vamos começar analisando a otimização de um dos recursos mais caros de um app moderno, o JavaScript.