한 권으로 끝내는 Node & Express: 웹사이트 구축을 위한 서버 사이드 자바스크립트

257

16

장

-

정적 콘텐츠

각 파일에 핑거프린트를 남기는 방법 외에, 자원 번들링

bundling

도 많이 쓰이는 방법입니다. 번들

링은

CSS

파일이나 클라이언트 쪽 자바스크립트 파일을 하나로 묶습니다. 새 파일이 생겼으니

핑거프린트를 남기기도 쉽습니다.

16.7.

번들링과 최소화

최근에는

HTTP

요청 숫자를 줄이는 동시에 전송되는 데이터도 줄일 수 있는 ‘번들링과 최소

화’가 많이 쓰이고 있습니다. 번들링은 비슷한 파일(

CSS

나 자바스크립트)을 모아서 하나로 만

들어

HTTP

요청 숫자를 줄입니다. 최소화는 소스에서 불필요한 부분, 예를 들어 공백(물론

문자열에 있는 공백은 바꾸지 않습니다)을 제거하고, 심지어 변수 이름까지 짧게 바꿉니다.

번들링과 최소화에는 핑거프린트를 남겨야 할 파일 숫자가 줄아든다는 장점도 있습니다. 하지

만 여전히 할 일이 많고 복잡해 보이는군요! 다행히 그런트를 쓰면 일부 작업을 자동화해서 관

리 부담을 줄일 수 있습니다.

현재 우리 프로젝트에는 클라이언트 쪽 자바스크립트가 없으니 파일을 두 개 만듭시다. 하나는

연락처 폼 전송을 처리하는 데 쓸 파일이고, 다른 하나에는 장바구니 관련 기능이 들어갈 겁니다.

일단은 그 파일에 로그만 조금 넣어서, 번들링과 최소화가 잘 동작하는지만 확인하겠습니다.

첫 번째 파일인

public

/

js