Pular para o conteúdo

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

Seção intitulada 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.

  1. Instale rollup-plugin-visualizer:

    Janela do terminal
    npm install rollup-plugin-visualizer --save-dev

  2. 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",
        })]
    }
    });

  3. Execute o comando de build:

    Janela do terminal
    npm run build

  4. 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.

Contribua Comunidade Sponsor