Grunt or Gulp vs Webpack 의 차이 - ipadorusa/sri-vuejs GitHub Wiki

궁금한점 어떻게 보면 grunt나, gulp에서 하는것들이 webpack에서도 이루어질수 있는데 왜??? 그렇다면 module bundler 라고 안했을텐데..모듈이라는말에 집중해야하나?

일단 [엑소버드][https://perfectacle.github.io/] 님이 주신 답변 정리로 이해 해 보자.

소스 코드에 있는 공백들을 소스가 돌아갈 수 있는 수준에 한해서 모두 없애기. (minify)

- js 파일에 있는 변수명을 최대한 짧게 하기. (난독화, uglify)

- 이미지 파일을 압축시키기. 등등등

- 이를 통해 로딩 속도 단축, 모바일 사용자의 데이터를 절약시켜줄 수 있어서 최적의 UX를 제공해줄 수 있습니다.

그런데 이러한 작업들을 하는 방법은 굉장히 많습니다.

직접 손으로 공백을 제거할 수도 있고, 웹사이트를 이용해서 줄일 수도 있고, CLI를 이용해서 줄일 수도 있습니다.

하지만 이러한 작업들을 일일이 사람 손으로 하기에는 비효율적이므로 자동으로 해주는 task runner를 이용하는 것입니다.

- 그리고 웹팩은 단순 번들러가 아니라 '모듈' 번들러입니다.

http 1.1 표준 스펙에는 하나의 요청에 하나의 응답이 가능합니다.

따라서 여러 개의 js 파일을 서비스하려면 여러 개의 요청이 필요합니다.

그에 따라서 요청과 응답에 따른 오버헤드가 발생하고 이는 곧 기업 입장에서는 하나의 비용에 포함됩니다.

사용자에게 최적의 UX를 제공하지 못하고, 로딩 시간이 지연되므로 유저가 이탈할 가능성이 조금이라도 높아지죠.

따라서 이러한 파일을 하나로 합치는 것(번들링)입니다.

그럼 task runner의 concat(js나 css 파일을 하나로 합치는 플러그인)과 다른 게 무엇이냐... 라고 한다면

바로 '모듈'을 지원한다는 것입니다.

이 '모듈'의 의미는 A 파일의 모듈(하나의 함수, 변수, 클래스 등등)을 B 파일에 삽입이 가능하다 정도로 보시면 될 것 같습니다. 자바스크립트는 스코프를 전부 공유하는데 반해 이렇게 모듈 단위의 스코프를 지니게 되는 거죠.

- 물론 웹팩에서도 위의 Task runner에서 지원하는 minify, uglify 등등의 기능을 지원하므로 저는 거의 웹팩만 씁니다. 물론 Task runner가 필요한 특수한 상황(API 서버와 static 서버를 분리해야할 때 등등)에는 gulp나 grunt를 쓰곤 합니다.

- 1. Code Splitting(코드 분할)

- 1-1. 변경률이 적은 서드파티(제이쿼리, 리액트 등등의 라이브러리나 프레임워크)들을 따로 빼서 사용자의 임시 파일에 저장시켜놓고 방문할 때마다 해당 내용을 캐싱하게 끔 해서 좀 더 로딩 속도를 높이기.

- 1-2. SPA라고 해도 사용자가 모든 URI를 방문하는 게 아니니 URI 별로 소스 코드를 빼기.

- 1-3. 그런데 URI 별로 소스 코드를 빼도 파일의 크기가 너무 작은 경우에는 오히려 요청/응답에 대한 오버헤드가 클 수 있으므로 소스 코드의 최소한의 크기 정하기.

- 2. Tree Shaking(나무의 가지를 흔들어 썩은 열매를 떨어뜨리 듯, 필요없는 코드들을 삭제하기)

쓰지 않는 코드(변수 함수 등등)들이 있는 경우에 자동으로 번들링 할 때는 없애기.

- 3. 파일의 크기가 작은 경우에는 Data URL로 리소스를 표현하기(폰트, 이미지, svg 등등)

- 웹팩에서는 js 소스만 모듈로 보는 게 아니라 정적인 리소스들(이미지, 폰트, svg 등등)을 모두 모듈로 보고 있습니다.

그래서 이 모듈(정적인 리소스)들을 컨트롤 할 수 있게 되는 거죠.

그런데 이미지 크기가 너무 작은 경우에는 요청/응답에 대한 오버헤드를 줄이기 위해 sprite image를 이용할 수도 있고, Data URL을 이용할 수도 있습니다.

하지만 sprite image를 만드는 것은 귀찮고 사용하기도 불편할 때가 있죠. (이를 위한 플러그인들도 많지만)

그래서인지 모던 브라우저에서는 이런 Data URL을 통해서도 그런 오버헤드를 줄일 수 있겠죠.

- 등등이 많은데 이는 Task runner에서는 지원하지 않죠, 오로지 모듈들을 번들링하는 데 최적화 된 모듈 번들러에서만 지원하는 기능이죠. Task runner는 모듈들 사이의 관계를 모르니 이러한 행위를 할 수가 없죠.