Analise o tamanho dos pacotes

Entender o que é parte de um pacote Astro é importante para melhorar o desempenho de um site. Visualizar os pacotes pode fornecer pistas sobre onde mudanças podem ser feitas no seu projeto para reduzir o tamanho dos pacotes.

Receita

A biblioteca rollup-plugin-visualizer permite que você visualize e analise seu pacote Rollup para ver quais módulos estão ocupando muito espaço.

Instale rollup-plugin-visualizer:
- npm
- pnpm
- Yarn
```
  npm install rollup-plugin-visualizer --save-dev
```
```
  pnpm add rollup-plugin-visualizer --save-dev
```
```
  yarn add rollup-plugin-visualizer --save-dev
```

Adicione o plugin ao arquivo astro.config.mjs:

// @ts-check
import { defineConfig } from 'astro/config';
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
vite: {
    plugins: [visualizer({
        emitFile: true,
        filename: "stats.html",
    })]
}
});

Execute o comando de build:
- npm
- pnpm
- Yarn
```
  npm run build
```
```
  pnpm build
```
```
  yarn build
```
Encontre o(s) arquivo(s) stats.html do seu projeto.

Eles estarão na raiz do seu diretório dist/ para sites totalmente estáticos e permitirão que você veja o que está incluído no pacote.

Se seu projeto Astro usa renderização sob demanda, você terá dois arquivos stats.html. Um será para o cliente, e outro para o servidor, e cada um estará localizado na raiz dos diretórios dist/client e dist/server/.

Veja a documentação Rollup Plugin Visualizer para orientação sobre como interpretar esses arquivos, ou como configurar opções específicas.

:::noteDada a abordagem única de hidratação Astro, a build não é necessariamente representativa dos pacotesque o cliente receberá.

O visualizador Rollup mostra todas as dependências que são usadas através do site, mas ela não separa o tamanho dos pacotes em uma relação por página.:::

Contribua Comunidade Sponsor