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

도입

Rails 7 앱에서 Webpack 5를 사용하던 중, JavaScript 코드의 작은 변경에도 불구하고 재컴파일에 약 39초가 소요되는 심각한 생산성 저하 문제를 겪었습니다. 이로 인해 개발 과정에서 많은 대기 시간이 발생하고 집중력이 분산되는 현상이 나타났습니다. Webpacker가 지원 종료됨에 따라, jsbundling-rails, Shakapacker, Importmaps, Vite 등 여러 대안을 검토했으며, 개발 속도 개선을 최우선 목표로 Vite를 선택하게 되었습니다.

Vite는 Vue.js 개발자 Evan You가 만든 현대적인 프론트엔드 빌드 도구로, 개발 속도 향상에 중점을 둡니다. Webpack과 달리 네이티브 ES 모듈을 사용하여 파일을 직접 제공하고, HMR(Hot Module Replacement)을 통해 변경 사항을 즉시 반영하여 개발 서버 시작 및 업데이트 속도를 획기적으로 단축합니다. 이 덕분에 기존 Webpack에서 39초 걸리던 재컴파일 시간이 1초로 줄어드는 놀라운 개선을 경험했습니다. Vite는 ESBuild 및 Rollup 기반으로 빠르고, 설정이 간단하며, 프레임워크에 독립적이라는 장점이 있습니다.

Vite 선택 및 도입 과정

저자의 팀은 11년 된 방대한 JavaScript 코드를 가진 복잡한 Rails 앱을 운영 중이었으며, 점진적인 마이그레이션이 필수적이었습니다. Vite는 여러 진입점(entry points)을 허용하여 앱의 일부만 단계적으로 마이그레이션할 수 있게 해주었습니다.

기존 Webpack 설정의 복잡성과 Shakapacker, jsbundling-rails PoC의 어려움 속에서, Vite는 가장 기본적인 진입점 테스트에서 즉시 완벽하게 작동하여 반나절 만에 실행에 성공했습니다. 이러한 즉각적인 성공과 Vite의 속도, 단순성이 Rails 개발자에게 최적의 솔루션임을 확신하게 된 결정적인 계기가 되었습니다.

Rails 앱 설정 요약

Rails 7+ 프로젝트에 Vite를 도입하려면 vite_rails 젬 추가, 인스톨러 실행, 개발 서버 구동, 그리고 Rails 레이아웃 파일에서 Vite 헬퍼 사용으로 요약됩니다. vite_ruby 및 vite_rails는 Rails 7.x 이상에서 최상의 경험을 제공합니다.

결론

Rails 앱에서 느린 프론트엔드 개발 워크플로우와 복잡한 설정으로 어려움을 겪는 개발자들에게 Vite는 매우 매력적인 대안입니다. 기존 Webpack 환경에서 39초에 달했던 재컴파일 시간을 Vite 도입 후 1초로 단축시키는 놀라운 성능 향상을 경험했으며, 이는 개발 생산성을 크게 높였습니다. Vite는 빠른 설정, 단순한 구성, 그리고 네이티브 ES 모듈과 HMR을 통한 즉각적인 피드백으로 Rails 개발자들에게 효율적이고 즐거운 프론트엔드 개발 경험을 제공합니다. 사이드 프로젝트나 기능 브랜치에서 Vite를 시도해보고 그 효과를 직접 확인해볼 것을 권장합니다.

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

Getting Started with Vite on Rails

핵심 요약

도입

Vite 선택 및 도입 과정

Rails 앱 설정 요약

결론

관련 글들

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

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

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

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

댓글0

댓글 작성