Vite 성능 최적화

TMT

성능

Vite는 기본적으로 빠르지만, 프로젝트 요구사항이 커지면서 성능 문제가 발생할 수 있습니다. 이 가이드는 다음과 같은 일반적인 성능 문제를 식별하고 해결하는 데 도움을 주기 위한 것입니다.

  • 서버 시작이 느림
  • 페이지 로드가 느림
  • 빌드가 느림

브라우저 설정을 검토하세요

일부 브라우저 확장 프로그램은 요청을 방해하고, 특히 브라우저 개발자 도구를 사용하는 경우 대규모 애플리케이션의 시작 및 새로고침 시간을 지연시킬 수 있습니다. 이런 경우 Vite의 개발 서버를 사용할 때는 확장 프로그램이 없는 개발 전용 프로필을 생성하거나, 시크릿 모드로 전환하는 것을 권장합니다. 시크릿 모드는 확장 프로그램이 없는 일반 프로필보다도 빠릅니다.

Vite 개발 서버는 사전 번들링된 종속성을 하드 캐싱하며, 소스 코드에 대해 빠른 304 응답을 구현합니다. 브라우저 개발자 도구가 열려 있는 동안 캐시를 비활성화하면 시작 및 전체 페이지 새로고침 시간이 크게 증가할 수 있습니다. Vite 서버를 사용할 때 "Disable Cache(캐시 비활성화)"가 활성화되어 있지 않은지 확인하세요.

Vite 플러그인 구성 점검

Vite의 내부 및 공식 플러그인은 호환성을 제공하는 동시에 최소한의 작업만 수행하도록 최적화되어 있습니다. 예를 들어, 코드 변환은 개발 시 정규식을 사용하지만, 빌드 시에는 정확성을 보장하기 위해 전체 파싱을 수행합니다.

그러나 커뮤니티 플러그인의 성능은 Vite가 제어할 수 없으며, 이로 인해 개발자 경험이 영향을 받을 수 있습니다. 추가 Vite 플러그인을 사용할 때 주의해야 할 몇 가지 사항은 다음과 같습니다.

  • 특정 경우에만 사용되는 대규모 종속성은 Node.js 시작 시간을 줄이기 위해 동적 가져오기로 변환해야 합니다. 예시: vite-plugin-react#212, vite-plugin-pwa#224.

  • buildStart, config, configResolved 훅이 긴 작업을 실행하지 않도록 해야 합니다. 이 훅들은 개발 서버 시작 시 대기 상태에 들어가므로, 사이트를 브라우저에서 액세스할 수 있는 시간이 지연됩니다.

  • resolveId, load, transform 훅은 일부 파일을 다른 파일보다 느리게 로드하게 만들 수 있습니다. 피할 수 없는 경우가 있지만, 최적화할 수 있는 영역을 점검하는 것이 좋습니다. 예를 들어, 전체 변환을 수행하기 전에 코드에 특정 키워드가 포함되어 있는지, 또는 ID가 특정 확장자와 일치하는지를 확인할 수 있습니다.

  • 파일 변환 시간이 길수록 브라우저에서 사이트를 로드할 때 요청 워터폴이 더욱 심각해집니다.

vite --debug plugin-transform 또는 vite-plugin-inspect를 사용하여 파일 변환에 소요되는 시간을 확인할 수 있습니다. 비동기 작업은 타이밍을 부정확하게 제공하는 경향이 있으므로, 숫자는 대략적인 추정치로 간주해야 하지만, 여전히 비용이 큰 작업을 드러내는 데 도움이 됩니다.

프로파일링

vite --profile을 실행하고 사이트를 방문한 후 터미널에서 p + enter를 눌러 .cpuprofile을 기록할 수 있습니다. 그런 다음 speedscope와 같은 도구를 사용하여 프로파일을 검사하고 병목 현상을 식별할 수 있습니다. 또한 프로파일을 Vite 팀에 공유하여 성능 문제를 식별하는 데 도움을 줄 수 있습니다.

Resolve 작업 줄이기

가져오기 경로를 해석하는 작업은 최악의 경우 상당한 비용이 발생할 수 있습니다. 예를 들어, Vite는 resolve.extensions 옵션을 통해 가져오기 경로를 "추측"하는 기능을 지원합니다. 기본값은 ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']입니다.

import './Component' 구문으로 ./Component.jsx를 가져오려고 할 때, Vite는 다음과 같은 단계를 수행합니다.

  1. ./Component가 있는지 확인 → 없음
  2. ./Component.mjs가 있는지 확인 → 없음
  3. ./Component.js가 있는지 확인 → 없음
  4. ./Component.mts가 있는지 확인 → 없음
  5. ./Component.ts가 있는지 확인 → 없음
  6. ./Component.jsx가 있는지 확인 → 있음!

위와 같이 가져오기 경로를 해석하기 위해 총 6번의 파일 시스템 확인이 필요합니다. 암시적 가져오기가 많을수록 경로를 해석하는 데 걸리는 시간이 더 많아집니다.

따라서 import './Component.jsx'처럼 가져오기 경로를 명시적으로 작성하는 것이 일반적으로 더 좋습니다. 또한 resolve.extensions 목록을 좁혀서 파일 시스템 확인 작업을 줄일 수 있지만, 이 설정이 node_modules의 파일에도 적용되는지 확인해야 합니다.

플러그인 작성자인 경우 위와 같은 확인 작업을 줄이기 위해 this.resolve 호출을 필요한 경우에만 수행하도록 해야 합니다.

TypeScript 설정

TypeScript를 사용하는 경우, tsconfig.json의 compilerOptions에 "moduleResolution": "bundler" 및 "allowImportingTsExtensions": true를 설정하여 .ts 및 .tsx 확장자를 코드에 직접 사용할 수 있도록 하세요.

배럴 파일 피하기

배럴 파일은 동일한 디렉터리에 있는 다른 파일의 API를 다시 내보내는 파일입니다. 예:

// src/utils/index.js
export * from './color.js';
export * from './dom.js';
export * from './slash.js';

개별 API만 가져오는 경우에도 배럴 파일에 포함된 모든 파일을 가져오고 변환해야 합니다. 초기 페이지 로드 시 더 많은 파일이 로드되어 페이지 로드 속도가 느려질 수 있습니다.

가능하면 배럴 파일을 피하고 개별 API를 직접 가져오세요. 예:

import { slash } from './utils/slash.js';

자세한 내용은 #8237 이슈를 참조하세요.

자주 사용되는 파일 미리 로드

Vite 개발 서버는 브라우저에서 요청할 때만 파일을 변환합니다. 이를 통해 빠르게 시작하고 사용된 파일만 변환할 수 있습니다. 그러나 일부 파일이 다른 파일보다 더 오래 걸리는 경우 요청 워터폴이 발생할 수 있습니다.

server.warmup 옵션을 사용하여 자주 사용되는 파일을 미리 로드하세요.

export default defineConfig({
  server: {
    warmup: {
      clientFiles: [
        './src/components/BigComponent.vue',
        './src/utils/big-utils.js',
      ],
    },
  },
});

네이티브 툴 사용 권장

코드베이스가 커질수록 Vite의 성능을 유지하려면 소스 파일에 대한 작업을 줄이는 것이 중요합니다.

  • CSS를 사용하고 Sass/Less/Stylus 사용 최소화
  • SVG를 UI 컴포넌트로 변환하지 말고 문자열 또는 URL로 가져오기
  • @vitejs/plugin-react 사용 시 Babel 옵션을 피해서 빌드 시 변환을 건너뛰기

또한 @vitejs/plugin-react 대신 @vitejs/plugin-react-swc 사용을 고려하세요.

Edit this page
Index

On this Page