개발~”빌드”~배포
개발자 모드로 프로젝트를 만들면 용량이 무겁다.
- 성능 최적화
- 코드 난독화
- 특수 문법/라이브러리 지원(JSX, Typescript → VanilaJS)
- 호환성, 의존성 위해 브라우저마다 라이브러리/Js문법 downgrade(babel)
ex) Redactor Build된 파일
빌드 툴
‘주요(main)’ 모듈(‘진입점’ 역할을 하는 모듈)을 선택
‘주요’ 모듈에 의존하고 있는 모듈 분석을 시작으로 모듈 간의 의존 관계를 파악
모듈 전체를 한데 모아 하나의 큰 파일을 생성
이런 과정 중에 변형이나 최적화도 함께 수행
-
도달 가능하지 않은 코드는 삭제됩니다.
-
내보내진 모듈 중 쓰임처가 없는 모듈을 삭제합니다(tree-shaking).
-
console, debugger 같은 개발 관련 코드를 삭제합니다.
-
최신 자바스크립트 문법이 사용된 경우 바벨(Babel)을 사용해 동일한 기능을 하는 낮은 버전의 스크립트로 변환합니다.!
-
공백 제거, 변수 이름 줄이기 등으로 산출물의 크기를 줄입니다.
Webpack
소스 코드와 node_modules 폴더의 전체를 묶고, 빌드한 다음 브라우저에 제공
webpack-dev-server: hot-reloading
웹팩을 사용할 경우 코드를 조금만 수정하더라도 npm run dev 또는 npx webpack을 통해 다시 리로딩을 해야 하는 것이 불편함. 조금씩 수정한건 바로 반영, 데이터 보존
ESbuild
노드 기반 번들러보다 10~100배 빠름
create-react-app이 제공하는 옵션 제공 안 함
hot-reload제공 안 함
SnowPack
Snowpack 개발 서버는 node_modules의 각 의존성마다 하나의 자바스크립트 파일로 묶고 해당 파일을 기본 자바스크립트 모듈로 변환한 다음 브라우저에 제공한다. 브라우저는 이 스크립트를 캐시하고 스크립트가 변경된 경우에만 다시 요청할 수 있다.
Vite
Vite는 프로젝트의 모든 의존성을 단일 기본 자바스크립트 모듈로 사전 번들링을 진행한다. 그 후에 많은 캐시 된 HTTP 헤더와 함께 제공된다. 즉, 첫 페이지 로드 후 가져온 의존성을 컴파일, 제공 또는 요청하는 데 시간이 낭비되지 않는다. 또한 Vite는 명확한 에러 메시지들을 제공하고 문제를 해결하기 위해 정확한 코드 블록과 줄 번호를 보여준다.
WMR
Preact는 작고 가벼운 프로젝트를 수행하려는 경우에 좋다. hot-module-replacing 개발 서버와 최적화된 프로덕션 빌드를 포함, 별도의 구성이 필요 없으며 다운로드하는 데 몇 초밖에 걸리지 않는다.
참고문헌
