Rails 앱에서 Vite로 프론트엔드 성능 극대화: 39초에서 1초로

도입

Rails 7 앱에서 Webpack 5 사용 시 JavaScript 변경에 39초가 소요되는 재컴파일 문제로 생산성 저하와 개발 집중도 분산 문제를 겪었습니다. Webpacker의 지원 종료 이후, jsbundling-rails, Shakapacker, Importmaps 등 다양한 대안을 검토한 결과, Vite를 최종 선택하게 되었습니다. Vite는 '빠르다'는 프랑스어에서 유래한 이름처럼, 재로드 시간을 1초로 단축시키는 놀라운 성능 향상을 가져왔으며, 본 글에서는 Vite 선택 이유와 속도 개선 원리를 설명합니다.

Vite의 핵심 기능 및 장점

Vite는 Vue.js 개발자 Evan You가 개발한 현대적인 프론트엔드 빌드 도구로, 개발 속도 극대화를 목표로 합니다. 기존 Webpack과 달리, 개발 시 네이티브 ES 모듈을 사용하여 파일을 직접 제공하며, Hot Module Replacement (HMR)를 통해 파일 변경 시 전체 페이지 재로드 없이 즉각적인 업데이트를 제공합니다. 이는 초고속 시작 시간과 개발 피드백을 보장합니다. Vite는 ESBuild 및 Rollup 기반으로 구축되었으며, 간단한 설정과 프레임워크 불가지론적 특성을 가집니다.

Vite를 선택한 배경

저희 팀은 11년 된 대규모 Rails 앱의 Webpack 재컴파일 문제(39초)를 해결해야 했습니다. 복잡한 레거시 JavaScript 코드베이스 환경에서 Vite의 다중 진입점 지원은 점진적인 전환을 가능하게 했습니다. Shakapacker나 jsbundling-rails 같은 대안들은 기존 Webpack 설정의 복잡성으로 인해 도입이 어려웠던 반면, Vite는 기본적인 테스트에서 완벽하게 작동하며 반나절 만에 실행에 성공하여 즉시 도입을 결정했습니다.

Rails 앱에 Vite 설정 가이드

Rails 7 이상 프로젝트에 Vite를 설치하는 주요 단계는 다음과 같습니다.

Gemfile에 vite_rails 젬 추가 및 bundle install.
bin/rails vite:install 명령어로 필수 설정 파일 생성.
bin/rails server와 bin/vite dev를 동시에 실행하여 개발 서버 가동.
Rails 레이아웃 파일에 vite_client_tag, vite_javascript_tag 등의 Vite 헬퍼 적용.
app/frontend/entrypoints/application.js에서 애플리케이션 모듈을 임포트하여 진입점 구성. vite_ruby 및 vite_rails는 Rails 7.x 및 8.x(Ruby >= 2.5) 버전에서 최적의 호환성을 제공합니다.

결론

Rails 애플리케이션에서 느린 프론트엔드 빌드 및 재로드 문제는 개발 생산성을 크게 저하시킵니다. Vite는 네이티브 ES 모듈과 HMR을 통해 이러한 문제를 해결하며, 기존 Webpack 기반의 복잡한 환경에서 벗어나 빠르고 간결한 개발 워크플로우를 제공하는 강력한 대안입니다. 특히 대규모 레거시 프로젝트의 점진적 마이그레이션에 적합하며, Rails 7 이상 버전에서 최적의 경험을 제공합니다. Vite 도입은 개발 속도를 혁신적으로 향상시키고 프론트엔드 툴링의 복잡성을 줄여 Rails 개발자에게 큰 이점을 제공할 것입니다.

Rails 앱에서 Vite로 프론트엔드 성능 극대화: 39초에서 1초로

Getting Started With Vite on Rails - FastRuby.io | Rails Upgrade Service

핵심 요약

도입

Vite의 핵심 기능 및 장점

Vite를 선택한 배경

Rails 앱에 Vite 설정 가이드

결론

관련 글들

Rails 앱에서 Vite를 도입하여 프론트엔드 개발 속도 획기적으로 향상

Rails 프런트엔드 자산 관리 전략의 진화

레일즈 앱 개발: 모던 스택의 복잡성과 바닐라 레일즈의 단순함

Rails 애플리케이션에서 esbuild 오류 처리 개선: 브라우저에 직접 오류 표시

댓글0

댓글 작성