Snowpack이란?
더 빠른 웹개발을 위한 최신 프론트엔드 빌드 도구
Snowpack의 필요성
기존의 Webpack, Rollup, Parcel 같은 번들러와 다르게, 간단하고 가벼워, 번들 소요시간을 획기적으로 절약할 수 있다.
웹 빌드 시스템에 대한 새로운 접근 방식Javascript의 ESM을 이용하여, 동일 파일을 다시 빌드하지 않고,
변경사항을 브라우저에 즉시적용할 수 있다.
개발 서버를 50ms 이내에 시작할 수 있다. ( 번들링 작업을 하던시간이 없어짐으로서, 시간 단축 )
변경 사항이 브라우저에 즉시 반영된다. ( 번들링 작업할 필요가 없으므로 )
선호하는 번들러와 통합할 수 있다. ( 통합하면 좋은점은 무엇인가? )
Typescript, JSX, CSS 모듈등을 기본적으로 지원한다.
React, Vue, Svelte 같은 다양한 프레임워크를 지원한다.
번들 유무에 대한 차이점
1. 번들 없는 개발
개별 파일을 브라우저에 전달하는 방식을 사용한다.
Babel, Typescript, Sass 같은 라이브러리로 파일을 컴퓨터에서 실행할 수 있도록 만들고(빌드),
ESM import/export 를 사용해 브라우저에서 개별적으로 불러온다(로드)
파일이 변경되면, Snowpack이 해당 단일 파일만 다시 빌드한다.
2. 번들 개발
추가 작업과 복잡성이 생긴다.
저장할 때마다 모든 변경사항을 다시 번들로 합쳐주어야만, 변경사항을 브라우저에 반영시킬 수 있다.
이제 ESM이 널리 지원되므로, 이런 방식은 불필요하다.
번들 없는 개발의 장점
빠르다.
예측한 대로 동작한다.
디버깅이 더 쉽다. ( 번들개발에 비해 )
개별 파일 캐시가 더 좋다. ( 번들개발에 비해 )
프로젝트 크기가 개발 속도에 영향을 주지 않는다.
의존성 모듈
NPM 패키지는 대부분 웹에서 직접 실행할 수 없는 CommonJS를 사용한다.
브라우저에서 직접 실행할 수 있는 ESM import / export 구문을 사용하여 애플리케이션을 작성하더라도
NPM 패키지를 가져올 때 번들러가 동작해야 한다.
Snowpack은 다른 접근 방식을 취한다.
전체 애플리케이션을 번들로 묶는 대신 의존성을 별도로 처리한다.
1. Snowpack이 애플리케이션을 스캔
2. node_modules 폴더에 설치된 의존성 모듈을 확인
3. 모든 의존성 모듈을 개별 Javascript 파일로 변환한다.
4. 변환된 각 파일은 브라우저에서 직접 실행하고 ESM import 구문을 통해 가져온다.
5. 의존성 모듈은 따로 변경하지 않는 이상, 변경사항이 없으니 다시 빌드할 필요가 없다.
node_modules/react => http://localhost:8080/web_modules/react.js
node_modules/vue => http://localhost:8080/web_modules/vue.js<body>
<script type="module">
import React from 'react'
import Vue from 'vue'
console.log(React)
console.log(Vue)
</script>
</body>
Skypack.dev
Snowpack에서 사용할 ESM 지원 패키지를 쉽게 검색하고 테스트 할수 있는 사이트
Skypack: search millions of open source JavaScript packages
Search millions of open source JavaScript packages on Skypack. Free to use.
www.skypack.dev
반응형
