vite
vue가 만들었음
프랑스어 인데 한국말로 바꾸면 빠르다는 뜻이라고 한다
예전에 사용해 본 결과
진짜 빠르긴 했었음
vite 공식 문서에서 가져온 문구
기존 번들링 툴들 넘 느려서 만들었다고 함
빠른 이유1 :
노드 모듈 중요한 것들만 미리 정적으로 번들링해놓고
나머지는 es modules 사용해서 동적으로 가져오기 때문에 개발서버 가볍고 빠름
웹팩은 Webpack Dev Server를 처음 시작할 때
프로젝트의 모든 파일을 읽고, 의존성을 해석하고, 번들링을 수행해야 함.
그러니까 hmr 기능을 사용하면 메모리상에서 변환된 파일만 변경하는 건 맞는데
그 전에 개발 서버 킬 때마다 전체를 모두 읽어야한다는 거임
(이 과정은 특히 프로젝트가 클수록, 그리고 파일이 많을수록 시간이 오래 걸림
이걸 콜드 스타트 문제라고 함)
근데 vite 는 전체를 읽으면 느리다고 생각해서
중요한 모듈(자주 쓰이는)과 아닌 모듈을 나누어서 번들링함
맨 처음 개발 서버 열 때
자주 사용되는 라이브러리나 큰 종속성들은 최적화하여 빠르게 로드할 수 있도록 사전 번들링해서 정적파일로 만듦
여기 node_modules/.vite 에 넣어 놓음 <= 이걸 사전 번들링이라고함
그럼 개발 서버 껐다 켰다할 때 이미 최적화된 vite 파일을 그대로 가져다 써서 메모리에 올리는 거임
(새로운 게 추가되었다면 변경된 부분만 다시 번들링함)
그럼 사전에 번들링 되지 않은 것들을 언제 가져오는지?
=> 그때그때 번들링해서 가져옴. 이걸 동적 번들링이라고 함
vite는 es modules(import export 쓰는 문법)을 사용함
파일에 있는 import 구문을 읽어서 그때 그때 필요한 것들만 내려주는 거임 (동적 번들링)
동적 번들링으로 가져온 것들은 따로 node_modules/.vite 에 안 넣어주고 바로 브라우저에 적용함
이런 이유로 초기 개발 서버 켜는 시간이 짱 빠름
이걸 vite는 Native ESM 을 사용해서 빠르다고 말함
hmr 관련 설명하는 vite
빠른 이유2 : esBuild 사용해서
esbuild는 원래 있던 자바스크립트 빌드 툴임
go로 작성되어 있어서 빌드 속도 짱 빠름
go의 고루틴을 활용해서 병렬처리를 최적화하고...
설계 또한 단순해서 빠르다고함
웹팩이 제공해주듯이
msModule, commonJS 지원( 최적화하려면 msModule이 나을 지두 )
트리 셰이킹 지원 (안 쓰는 코드 지워주는 거)
코드 스플리팅 (빌드 파일 하나의 파일로 만드는 게 아니라 쪼개서 만듬, 페이지에서 필요할 때마다 청크 파일 가져오게 함)
타입스크립트 지원(그래두 타입 검사하려면 tsconfig.json 설정은 필수인...)
이거 다 됨
+ 근데 esbuild는 트랜스파일 가능하지만 es5은 지원 안 함...
+ 애초에 빌드 빨리할려고 만든 툴이지 트랜스 파일에 초점이 맞춰진 애가 아님
webpack과의 차이는
webpack은 플러그인 등 많은 기능을 제공해서 좋은데 많은 설정을 제공하려다보니 무거움
esbuild는 그런 거 다 단순화 시킴... 최소한의 플러그인 시스템을 가지고 있는 거임... 가벼움
그러니까 결론
vite는
esbuild (빌드 속도 짱 빠름) + esbuild를 이용한 ems 환경 개발 서버
이런 합작인 듯...
swc
환경 세팅하다가 만난... 권장하는 듯한 느낌의 swc...
이게 뭐지...
알아봤음
1. esbuild랑 똑같은 빌드 툴임. 근데 이건 rust로 만들어짐
2. esbuild과 제공해주는 건 비슷한데 보다 고급 기술을 사용해서 빠르다 함...
3. 그래서 큰 규모가 큰 프로젝트 같은 경우에는 쓰면 좋다고 함
4. 작은 프로젝트는 이미 esbuild 있기 때문에 굳이... (내 생각)
2023년 5월에 next.js 올라온 이슈 ...
[Next.js] 왜 Next.js는 SWC를 선택했을까?
👩🏫 Next.js는 12버전부터 내장으로 babel 대신 SWC를 활용한 컴파일을 실행한다. SWC는 무엇이고 Babel과는 무엇이 다를까?
velog.io
swc 를 바벨 대신 트렌스파일러 툴로 쓰는 거 같음
왜지...
아무래도 웹팩 + 바벨 버리는 과도기 같음
++++++
라고 생각했는데
swc도 거의 es5문법으로 바꿔주기 위해, 트랜스 파일러로 쓰는 거 같다 ㅜㅜ
++++
라고 생각했는데
swc es5문법 하나도 친절하게 안 되어있음
애초에 동적번들링하려면 무조건 es모듈 문으로 가져와야하는데
es5는 commonjs만 읽고 브라우저는 commonjs을 못 읽음 <= 결국 umd 형식으로 바꿔줘야함
umd 형식은 es모듈 문으로 동적 번들링 안되니까
vite 취지 + 컨셉에 맞지 않음....
팀원이 도움 주셔서 legacy로 es5설정 성공함...
+ 꼬옥 vite.config 에 타입스크립트 경로 넣어주기...
참고 블로그
'TIL' 카테고리의 다른 글
| 새로 나온 hook useFormStatus 등 리액트 동향 살펴보기 (0) | 2024.07.02 |
|---|---|
| icon suspense lazy 기능으로 넣기 (0) | 2024.07.02 |
| ts 브랜딩 타입 (태그드 타입) vs enum vs 리터럴 (0) | 2024.06.28 |
| jest (0) | 2024.06.26 |
| 이미지 public에 넣기 vs src에 넣고 import하기 ++ 이미지 suspense로 감싸서 가져오기 (0) | 2024.06.24 |
댓글