1. SPA 애플리케이션 배포
React, Vue 등을 기반으로 개발한 SPA 애플리케이션을 배포하기 위해서는 배포에 필요한 코드들만 포함시키고 패키징하는 빌드(Build) 과정을 거쳐야 함
Vite 빌드 도구를 활용하여 React 애플리케이션을 개발하였을 경우, 개발자는 다음의 명령어를 통해 빌드 단계를 수행할 수 있음
npm run build # vite build빌드 과정에서는 번들링을 통해 .jsx, html, css와 같이 개발자가 작성한 코드 파일들이 브라우저가 이해할 수 있는 단일 .html, .css, .js 파일로 압축됨
브라우저가 .jsx를 실행?
브라우저는 개발자가 개발 단계에서 jsx와 같은 편의성 문법을 통해 작성한 컴포넌트 코드를 이해할 수 없음(해석, 변환 불가)
→ 브라우저는 HTML 문서(.html)와 스타일 시트(.css), 스크립트(.js)만 이해할 수 있음
번들링(Bundling)
번들링은 여러 개의 JavaScript 파일을 하나의 파일로 묶어, 브라우저에서 효율적으로 로딩하고 실행될 수 있도록 최적화하는 과정
이를 통해 번들 사이즈를 줄이고 불필요한 코드를 제거한 압축된 형태의(minification) 파일을 통해 성능을 개선할 수 있음
Vite는 최종 번들링을 수행하는 과정에서 내부적으로 Rollup.js 를 통해 번들링을 수행하며, 다음의 핵심 기능들을 제공함
-
트리 쉐이킹(Tree Shaking)
사용되지 않는 코드나 import된 함수들을 제거하여 최종 번들 크기를 최소화 -
코드 분할(Code Splitting)
애플리케이션을 여러 개의 작은 청크로 나누어, 필요한 부분만 로딩하도록 최적화 -
다양한 플러그인 제공
다양한 플러그인을 통해 추가적인 변환이나 압축, 변형 처리(minify, uglify)
Minify
코드에서 공백, 주석, 불필요한 문자 등을 제거하여 번들 사이즈 축소
Uglify
코드에서 변수명과 함수명을 짧은 이름으로 변경하는 등, 코드 구조를 변경하여 번들 사이즈 축소