초기 자바스크립트는 모듈이 없는 채로 만들어졌다. 아주 간단한 동작만 하기 위한 목적으로 만들어졌기 때문에 파일을 여러 개로 만들어서 개발할 수 없었다.
이후에 node가 만들어지고 서버에서 js를 사용할 수 있게 되면서 require 함수, module.exports를 쓰는 CommonJS 방식의 모듈이 만들어졌다.
서버 프로그래밍은 코드를 미리 만들고 파일에서 코드를 동적으로 불러오는 데 제한이 없지만, 브라우저는 js를 저장하지 못하고 매번 불러와야했다. CommonJS와 다르게 비동기가 가능한 Asynchronous Module Definition (AMD)라는 방식으로 브라우저에서 돌아가는 모듈을 만들었다.
하지만 이 방식은 여러 파일을 로딩해야했고, js 파일을 동시에 여러개 호출 시 속도 문제 발생 및 특정 js 파일의 로딩이 지연되면 전체가 늦어지는 문제가 있어 역시 널리 쓰이지 않게 됐다.
참고
CommonJS와 AMD의 JavaScript 모듈화: https://d2.naver.com/helloworld/12864
번들
여러 개 파일을 비동기로 로딩하는 것이 문제라면 그냥 처음부터 파일을 하나로 합쳐서 전달하는건 🤔?!
결국 사람들은 여러개의 파일을 나눠서 개발할 수 있도록 모든 파일을 하나로 합친 하나의 번들(Bundle)을 만들었다.
번들링
번들링(Bundling)이란 웹 어플리케이션을 제공하기 위해 분리된 모듈을 묶어주는 작업으로, 하나의 번들을 만드는 작업을 의미한다.
app
// app.js
import { add } from './common.js';
console.log(add(1, 2)); // 3
// constant.js
export const add = (a, b) => {
return a + b;
}bundle
function add(a, b) {
return a + b;
}
console.log(add(1, 2)); // 3번들러
번들러는 번들링을 작업하는 도구로 대표적으로 Webpack, Rollup, Parcel, Browserify 등이 있다.
번들러는 서로 의존성이 있는 여러 JS 파일(모듈)들을 하나의 번들 파일로 묶어주는 역할을 한다. 이 때, 꼭 JS 파일만 가능한 것이 아닌 웹팩의 로더(Loader)를 통해 다양한 타입의 파일들도 번들링 가능하다.
개발자가 직접 모든 JS 파일의 변수를 확인해 중복 선언을 피해야했던 것과 다르게, 번들러를 통해 모듈 단위 개발이 편리해졌다.
그러나, 수천개의 js 모듈이 있는 프로젝트라면 Webpack을 이용해 개발 서버를 실행할 때 굉장히 긴 시간을 기다릴 수 있다 🤯
Vite
Vite는 Vue.js 팀이 개발한 웹 개발용 빌드 도구이다. 프랑스어로 매우 빠르다 를 의미한다.
그래서 왜 Vite를 사용해야하는가
지루할 정도로 길었던 서버 구동
개발 서버 실행 시 전체 파일을 처음부터 번들링하는 콜드 스타트 방식과 다르게 vite는 dependencies, source code 두가지 카테고리로 나누어 개발 서버를 시작하게 한다.
Vite는 사전 번들링과 ESM(ECMAScript Modules) 기반의 번들링을 통해 빠른 개발을 제공한다.
Webpack개발 서버 실행 시 전체 파일을 처음부터 번들링하지만, vite는 설치와 동시에 수정이 잘 일어나지 않는 의존성 패키지(컴포넌트 라이브러리와 같은 모듈)들을 Esbuild를 사용해 사전 번들링 해두고, 수정이 잦은 내부 소스 코드는 브라우저에서 Native ESM을 이용해 을 이용해 소스 코드를 제공하도록 하고 있다. 즉, 브라우저가 곧 번들러라는 의미이다. 따라서 조건부 동적 import 이후의 코드는 현재 화면에서 실제로 사용이 되어야만 처리가 된다.
ESM (ECMAScript Modules)
자바스크립트 네이티브 모듈, 브라우저 자체에서 모듈 기능을 지원하기 위한 스펙이다. import, export를 이용해서 특별한 라이브러리 없이 js 코드를 모듈화해서 작성하면 브라우저가 이해할 수 있게됐다.
Esbuild
go 언어로 작성된 자바스크립트를 위한 번들러. 타입스크립트의 타입 체킹이나 프론트엔드 언어 (Vue, Angular) 지원, 핫 모듈 리로딩을 포함한 개발 서버 오픈 등 번들링과 관계 없는 기능들은 일체 없다. 기존 빌드 속도보다 100배는 빠르지만 esbuild를 사용하지 않는 이유이다.
느린 소스코드 갱신
기존 번들러 기반 개발 진행 시, 소스 코드 업데이트를 하면 번들링 과정을 다시 거쳐야했다. 이를 위해 HMR(Hot Module Replacement)라는 대안이 나왔으나 완전하게 시간을 개선할 순 없었다.
Vite는 ESM을 이용해서 HMR을 지원한다. 어떤 모듈이 수정되면 vite는 수정된 모듈과 관련된 부분만 교체하고, 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달한다.
그러나, vite는 개발 환경에서는 빠른 속도를 가진 Esbuild를 사용하지만 빌드 과정에서는 코드 스플리팅(Code-splitting)과 CSS 관련 처리가 미비해 Rollup 번들러를 사용한다. 같은 모듈을 import하는 것을 매번 요청해서 가져오면 비효율적이고, 최적의 퍼포먼스를 내기 위해서는 번들링하는 게 좋기 때문이다.
// vite.config.ts
rollupOptions: {
input: {
main: resolve(__dirname, './index.html'),
},
output: {
manualChunks: {
// Split external library from transpiled code.
vue: ['vue', 'vue-router', 'pinia'],
vuetify: ['vuetify', 'vuetify/components', 'vuetify/directives'],
},
},
},HMR (Hot Module Replacement)
브라우저를 새로 고치지 않아도 웹팩으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영될 수 있게 도와주는 설정이다.
Code splitting
번들한 여러 코드 혹은 컴포넌트를 분리하는 것으로, 필요에 따라 특정한 컴포넌트만 로딩하거나 병렬로 로딩할 수 있다.
webpack에서는const Home = () => import(/* webpackChunkName: "home" */ './Home.vue');처럼webpackChunkName를 지정하면 해당 이름으로 파일이 분리되어 빌드된다.
그래서 vite?
항상 모든 기술을 선택하는 데 있어서 무조건적으로 좋은건 없다 생각한다. 이번 프로젝트는 최신 기술을 사용해보는 데 의의를 두기 위해 vite를 선택했다. Webpack과 어떤 점이 다른지 개발 속도가 향상됐다는데 얼마나 향상됐길래 vite라는 이름을 사용하는지 궁금해서 사용했다.
build가 훨씬 빠른 장점이 있고, 기존 프로젝트에서 webpack을 vite로 migration할 수 있는지 여부는 확인해보면 좋을 것 같다.
