vite-2 (vite 랑 친해지기🤶)

vite 의 legacy 플러긴동작방식

• 일반적인 방식
  • 바벨 또는 다른 트랜스파일러가 코드 변환 시, 폴리필을 인라인으로 주입함

// 원본 코드 
const arr = Array.from(new Set([1, 2, 3])); 
// 트랜스파일 후 
require('core-js/modules/es.array.from'); var arr = Array.from(new Set([1, 2, 3]));

• Vite legacy 플러긴의 방식
  • 모던브라우저 번들을 따로 분리함.
  • 그리고 레거시 브라우저용 폴리필들을 별도의 스크립트로 주입함
  • 이렇게 함으로써 모던브라우저는 불필요한 폴리필을 다운로드 하지 않고, 레거시 브라우저만 필요한 폴리필 다운로드

<!-- index.html --> <!-- 모던 브라우저용 --> 
<script type="module" src="/src/main.js"></script> 
<!-- 레거시 브라우저용 --> 
<script nomodule> // SystemJS 폴리필 
</script
>
<script nomodule src="/polyfills-legacy.js"></script> 
<script nomodule src="/main-legacy.js"></script>

• nomodule

vite 에서 external 옵션은?

• 번들링하지 않고 외부에서 가져오도록 명시함
• 즉, 번들러가 해당 모듈을 직접 번들리앟지 않고 외부 의존성 취급

vite 에서 rollUp / esbuild 각각 언제 사용?

• esbuild는 개발모드
  • for. 매우 빠른 트랜스파일링
• rollup 은 프로덕션 모드
  • fo코드 스플리팅, 트리 쉐이킹, 번들 최적화