Gulp를 활용한 CSS 및 JS 최적화: 용량 줄이기와 로딩 속도 향상
css, js 용량이 크다
물론 그 까닭은 코드가 불필요하게 길거나, 로직이 별로거나 할 수도 있지만 오늘은 그 자체의 용량에 집중을 해 보기로 했다! css, js 는 웹페이지가 로딩이 될때 그 파일이 있는 server 로 부터 요청을 해서 가져와서 사용하는 방식이다. 따라서 어쩔 수 없이 css, js자체의 용량에 따라 웹페이지가 로드되는 시간이 달라질것이다!
min.js min.css
따라서 cdn 에서 가져오는 파일들은 변수명이 a, b, c로 치환되고 new line, space 등이 최소화 된 상태로 정말 1줄로된 js css 를 가져온다. 이것은 바로 css 와 js 의 용량을 줄여서 웹페이지 로드시간을 줄이기 위해서 일 것이다! 우리도 deploy 과정에서 우리가 만든 js, css를 자동으로 간소화 해주는 process가 있으면 큰 도움이 되겠다! 라는 생각을 하게 되었고 방법을 찾기 시작했다
gulp
역시! 해당 기능을 제공해 주는 Tool 이 있었다! 바로 gulp 것이었는데 npm 을 통해서 다음의 package 를 install 한다
1
gulp gulp-clean-css gulp-terser terser
그 다음 gulp 라는 command 만 입력해주면 알아서 변수명, new line 이런것들을 정리해주어 용량을 상당히 줄여 준다
Prod Deploy 에만
이러한 과정을 prod deploy 에만 적용을 했다. gulp 로 css,js를 단순화 하면 사실 개발자 도구로 디버깅하기가 조금은 귀찮아 진다. 내가 설정했던 변수명이 사라지게 되고 line 이 죄다 1이어서 내가 원하는 그 line 찾아가기가 어렵다 ㅋㅋㅋㅋㅋㅋ 한참…. 한참 찾았다 따라서 Prod Deploy 에서만 적용을 하여 사용하기로 했다!