rsbuild-best-practices은(는) 무엇을 하나요?
Rsbuild 프로젝트 작성, 검토 및 문제 해결 시 사용하는 구성, CLI 워크플로우, 타입 검사, 번들 최적화, 에셋 및 디버깅에 대한 모범 사례
구성(Configuration)
rsbuild.config.ts사용을 권장합니다. ESM 또는 CJS에 관계없이 자동으로 감지합니다.- Node.js API를 사용하는 경우
createRsbuild와rsbuild.startDevServer를 활용하세요. - 소스 디렉토리(
source.entry)를 명시적으로 설정하여 불필요한 파일 스캔을 방지하세요.
CLI 워크플로우
rsbuild dev로 개발 서버 실행,rsbuild build로 프로덕션 빌드.- 빌드 분석 시
rsbuild build --analyze플래그를 사용하여 번들 분석기를 활성화하세요. rsbuild inspect명령어로 최종 Webpack/Rspack 구성을 확인하세요.
타입 검사(Type Checking)
- Rsbuild는 기본적으로 TypeScript 타입 검사를 활성화하지 않습니다.
tools.tsChecker옵션을 사용하세요. - 타입 검사 속도를 높이려면
@rsbuild/plugin-type-check플러그인을 설치하고 등록하세요.
번들 최적화(Bundle Optimization)
- 코드 스플리팅 기본값이 충분하지 않으면
performance.chunkSplit을'all-chunks'로 설정하세요. - 트리 쉐이킹은 기본적으로 활성화되어 있습니다.
performance.treeShaking을false로 설정하지 마세요. output.minify옵션으로 압축기를 설정할 수 있습니다 (기본:esbuild, 대안:swc).
에셋(Assets)
- 정적 에셋은
public/디렉토리에 배치하고, JavaScript에서 import하여 경로 해싱을 활용하세요. output.assetPrefix를 CDN URL로 설정하여 배포 시 에셋 경로를 변경하세요.
디버깅(Debugging)
rsbuild dev --open으로 브라우저를 자동으로 열고 디버깅하세요.tools.webpackChain또는tools.rspackChain을 사용하여 커스텀 로더/플러그인을 추가하세요.- 로그 레벨을 높이려면
process.env.DEBUG='rsbuild:*'환경 변수를 설정하세요.