parcel 을 사용하려는 이유

12/09 (수) 11: 25 이전

 

cra, vue-cli는 webpack 기반 이며 심지어 vue는 거기에 한술 더떠서 vue-loader를 붙여가지고 webpack공식문서에서 하라는대로 하면 안될때가 많다.

 

결국 프론트엔드 개발할때 다음과 같은 것들이 표준아닌 표준이 되었는데

1. hot module replace ( webpack에서 이거 설정하다가 속만 태웠다... )

2. dev, prod, local 분리 (환경변수)

3. 에셋 컨트롤

4. 그외 ( vue, react, sass?, typescript?, xx-router, xx-store... ) 붙여주기

 

물론 각각의 xx-router, xx-store등은 알아서 붙여야 하지만 그외 1, 2, 3은 webpack보다 훨신 쉽다.

plugin도 붙이는거 엄청쉽다. 한글문서도 있다

 

요즘 배보다 배꼽이 더커진 라이브러리를 활용하기위한 프레임워크 세팅에 시간을 쏟고싶지 않아서 한번 parcel을 사용해 보려고 한다.

 

여기까지 parcel 내용

---

12/09 (수) 11: 25 이후

 

parcel, webpack 둘다 "하나"의 파일로 build하는것에 중점을 둔 "번들러"다.

만약 HMR을 활성화 했다면 vue-cli기준으로 다음과 같은 코드를 브라우져에서 볼수 있을것이다.

 

<script type="module">
 ...
<script>

이는 브라우저의 ESM 기능이며 최신 이라해봤자 can i use를 기준으로 지원 안되는 가장 최근의 브라우져도 2016년 이전의 브라우저다.

ESM에서는 dynamic import도 지원한다.

 

하지만 번들러에서는 네트워크 응답이 줄어든다는 장점이 있을 것이다.

snowpack은 build할때 아예 다시 webpack이나 parcel로도 리펙토링 할수 있다.

즉 굳이 ESM사용하기 싫을경우 그냥 plugin으로 붙여버리면 되는 일이었고 무엇보다 CDN의 사용성이 극대화 될수있다는 생각이 들었다.

---

12/10 (목) 새벽

 

확실히 빌드랑 dev 띄우는거랑 비교도 안돼게 빠르고 설정도 엄청 간편하게되어있다.

entry point 관리에 대한 부담도 훨신 적어졌고 webpack, parcel plugin 붙여서 1개의 파일로 bundle 하는것도 시도해 봤는데 잘되었다.

 

하지만 다음과 같은 문제가 있다.

webpack, parcel의 bundle plugin을 안붙이면 기본적인 minify 안됨

 => 실험 기능으로 snowpack에서 core로 사용하는 esbuild 의 option을 이용하면 되긴 하는데 어디까지나 실험적 기능이다.

결국 minify 하려면 plugin을 직접 만들거나 ( plugin이 있긴 하나 공백제거하는 수준이며 작성하기엔 너무 비효율적인거 같다 ), webpack이나 parcel bundle plugin을 사용해야 하는데 bundle plugin을 사용해서 다시 하나의 파일로 합칠바에

시작부터 parcel, webpack을 사용하는게 훨신 안전하다는 생각도 들고 애초에 이 방식 자체가 snowpack를 사용하는 이유가 없다는 생각도 든다.