Webpack (2) 썸네일형 리스트형 Frontend Tool) Vite(비트)란 무엇인가 🔹 vite (veet) : 프랑스어로 “빠르다” 🔹 vue를 개발한 Evan You 🔹 다양한 프레임워크 지원 (Vue, React, TypeScript, VanilaJS 등) 🔹 실제 프로덕션 제품의 성능을 향상시키는 것이 아니라 개발 속도를 향상시키는데 도움을 주는 툴 1. 배경지식 vite의 동작방식과 어떤 역할을 하는지 알아보기 전에 필요한 배경지식들을 공부하고 정리했다. 번들링 컴포넌트로 모듈화된 소스코드를 브라우저에서 실행할 수 있는 하나의 파일로 묶어 연결해주는 작업 대표적인 번들링 툴: webpack, rollup, parcel HMR(Hot Module Replacement) 앱을 종료하지 않고 갱신된 파일만 교체하는 방식 코드에 변경이 발생하면 모든 파일을 다시 번들링하지 말고 갱신된.. Frontend) Vite란 무엇인가 매우 빠른 웹 번들러 툴 1. 등장 배경 자바스크립트의 기능과 규모가 확대됨에 따라 모듈화를 하기 시작했다. ESM (ECMAScript Module)이라는 것이 등장해서 자바스크립트 자체에서 모듈화를 지원하기 시작했다. 코드에서 빠질 수 없는 import, export 구문이 바로 이 문법이다. 모듈화된 여러 개의 파일들을 비동기 로딩하는데 특정 파일이 너무 큰 경우 로딩이 지연돼서 전체 성능이 저하하게 되는데 이 문제를 해결하기 위해 webpack, parcel, rollup 등과 같은 번들러가 등장했다. 여러 개의 모듈화된 파일들을 하나의 파일로 만들어준다. 다만 이 번들러들은 많게는 수십, 수백개의 파일들을 하나로 합치는 작업을 하기 때문에 프로젝트가 커질수록 빌드 속도가 아주 느려지는 문제가 발.. 이전 1 다음
