next.js 에서 vite를 사용하는 것이 좋은지 알아보고 있다.
TurboPack을 처음에 쓰려고 했으나, 찾아보니 측정한 근거가 정확하지 못해서 추천하지 않는 사람들이 많았고, 시장 자체도 Webpack, vite가 가장 많이 사용하고 있으니
직접 사용해보고자 공부중이다.
(LINE frontend 개발자 기준)
https://engineering.linecorp.com/ko/blog/uit-survey2022-report
SWC
트랜스파일러
Rust로 작성된 JavaScript 컴파일러입니다. Babel과 유사하지만 더 빠르고 효율적입니다. swc는 JavaScript와 TypeScript 코드를 트랜스파일하며, ES6+ 코드를 ES5 이하 버전으로 변환할 수 있습니다. 이는 JavaScript 프로젝트에서 더욱 최신 기능을 사용할 수 있게 하며, 브라우저 호환성을 유지할 수 있도록 합니다.
swc는 현재 TypeScript, JSX, Flow, ECMAScript Modules, CommonJS와 같은 다양한 형식의 코드를 처리할 수 있습니다. 또한 코드의 최적화도 가능합니다. swc는 코드를 번들링하지는 않지만, 코드 최적화 도구와 결합하여 번들링과 함께 사용될 수 있습니다.
Babel과 달리 swc는 Rust로 작성되어 빠른 속도와 안정성을 보장합니다. Rust의 안전성과 속도는 swc를 사용하는 프로젝트에서 큰 장점이 될 수 있습니다. 또한 swc는 JavaScript와 TypeScript 커뮤니티에서 인기 있는 도구입니다.
next.js에서는 현재 컴파일러로 내장되어있다. v13.0.0부터 SWC Minifier가 기본적으로 활성화되어있다.
Minifier(미니파이어)란, 소스 코드의 용량을 줄이기 위해 코드를 압축하고 최적화하는 도구를 말합니다.
Babel과 SWC
대체 가능한 도구가 아닌 보완적인 도구입니다. 예를 들어, Babel은 React 애플리케이션의 JSX 구문을 변환하는 데 매우 유용합니다. 반면에 SWC는 대규모 JavaScript 코드베이스의 빠른 트랜스파일링에 적합합니다. 이러한 이유로, 많은 프로젝트에서는 Babel과 SWC를 함께 사용하거나, 각각의 장점을 살려서 선택적으로 사용하기도 합니다.
Next.js에서도 기본적으로 Babel을 사용하고 있습니다. 그러나 최신 버전부터는 SWC를 이용한 더 빠른 빌드 옵션을 제공하고 있습니다. 또한, SWC를 이용한 코드 최적화 기능도 제공하고 있습니다.
ESbuild
자바스크립트 번들러, vite
빠른 자바스크립트 번들러 및 최적화 도구입니다. 대규모 프로젝트의 번들링을 빠르고 효율적으로 처리할 수 있습니다.
ESbuild는 Go로 작성된 빠른 JavaScript 번들러 및 최적화 도구입니다. ESbuild는 Babel, Webpack, Rollup과 같은 도구들과 비교할 때 몇 가지 뚜렷한 장점이 있습니다.
먼저 ESbuild는 빠릅니다. 이는 Go 언어로 작성되어 고성능의 빌드 속도를 자랑합니다. ESbuild는 JavaScript 파일을 빠르게 번들링하고 최적화하는데 매우 유용합니다.
또한 ESbuild는 JavaScript 최신 기능을 지원합니다. ESbuild는 ES2015+ 코드를 변환하지 않고 그대로 유지할 수 있습니다. 이는 브라우저 호환성 및 개발 생산성 측면에서 매우 유용합니다.
또한 ESbuild는 여러 형식의 모듈을 지원합니다. ESbuild는 CommonJS, AMD, UMD, ES6 Modules 등 다양한 모듈 형식을 지원합니다. 또한 TypeScript와 JSX도 지원합니다.
마지막으로 ESbuild는 플러그인 아키텍처를 가지고 있습니다. ESbuild는 기본적으로 매우 간단한 API를 가지고 있지만, 플러그인 아키텍처를 통해 커스터마이즈가 가능합니다. 이는 다양한 빌드 시나리오를 처리할 수 있도록 도와줍니다.
ESbuild는 빠르고 유연하며 JavaScript 최신 기능을 완벽하게 지원하는 도구입니다. ESbuild를 사용하면 더 빠르고 효율적인 개발 환경을 구축할 수 있습니다.
TSC
TypeScript 컴파일러
TypeScript 코드를 JavaScript 코드로 변환해주는 역할을 합니다. TypeScript는 JavaScript에 타입 시스템을 추가한 언어로, 일반적인 JavaScript와는 문법적인 차이가 있습니다. 따라서 TypeScript를 실행하기 위해서는 TypeScript 컴파일러인 tsc를 사용하여 JavaScript 코드로 변환해야 합니다.
tsc는 TypeScript 소스 코드를 입력으로 받아서 JavaScript 코드를 출력합니다. 이 과정에서 타입 체크와 같은 다양한 기능을 수행합니다. tsc는 커맨드 라인에서 사용할 수 있는 TypeScript 컴파일러이며, 다양한 옵션을 설정하여 컴파일을 수행할 수 있습니다.
TypeScript를 사용하는 프로젝트에서는 일반적으로 tsc를 사용하여 TypeScript 코드를 컴파일한 뒤, 컴파일된 JavaScript 코드를 실행하게 됩니다.
HMR
HMR(뜻: Hot Module Replacement)은 코드 변경이 발생했을 때, 수정된 부분만 바로 적용하여 새로고침 없이도 변경 사항을 브라우저에 바로 반영하는 기능입니다. 이를 통해 개발자는 개발 시간을 단축할 수 있고, 불필요한 작업을 줄일 수 있습니다.
Tree Shaking
트리 쉐이킹(Tree Shaking)은 사용되지 않는 코드를 제거하는 최적화 기술입니다. 애플리케이션에서 사용되지 않는 코드는 불필요하게 번들링되어 파일 크기를 불필요하게 늘리고, 로딩 속도를 늦추는 원인이 됩니다.
마무리
모듈 번들러에 대해 찾아보려고 하니 생소한 단어들이 많아서 정리한다.
Vite는 next.js 호환하는 템플릿이 없는 것 같다.
https://vitejs-kr.github.io/guide/
