번들 크기 분석

사이트 성능을 개선하려면 Astro 번들의 구성 요소를 이해하는 것이 중요합니다. 번들을 시각화하면 번들 크기를 줄이기 위해 프로젝트에서 변경할 수 있는 위치에 대한 단서를 얻을 수 있습니다.

레시피

rollup-plugin-visualizer 라이브러리를 사용하면 Rollup 번들을 시각화하고 분석하여 어떤 모듈이 공간을 차지하는지 확인할 수 있습니다.

1. rollup-plugin-visualizer를 설치합니다:

   npm

     npm install rollup-plugin-visualizer --save-dev

   pnpm

     pnpm add rollup-plugin-visualizer --save-dev

   Yarn

     yarn add rollup-plugin-visualizer --save-dev

2. 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. 빌드 명령을 실행합니다:

   npm

     npm run build

   pnpm

     pnpm build

   Yarn

     yarn build

4. 프로젝트의 stats.html 파일을 찾습니다.

   완전히 정적인 사이트의 경우 dist/ 디렉터리의 루트에 위치하며 번들에 무엇이 포함되어 있는지 확인할 수 있습니다.

   Astro 프로젝트가 온디맨드 렌더링을 사용하는 경우 두 개의 stats.html 파일을 가지게 됩니다. 하나는 클라이언트용이고 다른 하나는 서버용이며, 각각 dist/client 및 dist/server/ 디렉터리의 루트에 위치합니다.

   이러한 파일을 해석하거나 특정 옵션을 구성하는 방법에 대한 지침은 Rollup Plugin Visualizer 문서를 참조하세요.

:::note하이드레이션에 대한 Astro의 독특한 접근 방식을 고려할 때, 이 빌드가 반드시 클라이언트가 받게 될 번들을 나타내지는 않습니다.

Rollup visualizer는 사이트 전체에서 사용되는 모든 종속성을 표시하지만, 페이지별로 번들 크기를 세분화하지는 않습니다.:::