웹팩 소개영상 1
웹팩의 역할 및 웹팩으로 인해 우리가 얻을 수 있는 것들에 대해 알아보도록 하겠다.
페이지 로딩 속도를 체크할 수 있는 크롬 개발자창의 network 탭이다.
페이지 로딩 속도를 측정할 때 인터넷 속도도 설정할 수 있다.
위 Online 설정에서 설정한 후 테스트하면된다.
인터넷 속도를 느리다고 설정한 채로 측정하면 파일들 다운로드 속도가 느려지는 것을 확인할 수 있다.
이런 것을 통해 ‘아, 이 페이지는 인터넷 속도가 느린 곳에서는 취약하겠구나.’라는 것을 판단할 수 있다.
타임라인을 확인해보면, HTML -> CSS -> JS -> 화면그리기 순서대로 진행되는 것을 알 수 있다.
위 그림을 랜더링 파이프라인이라고 한다.
이런 과정들이 너무 느리다!
이런 것들을 웹팩을 활용해 개선해보자!
이것이 웹팩을 활용하는 취지이다.
웹팩은 ‘브라우저를 위한 사전 컴파일러’라고 생각하면 된다.
그리고 웹팩은 자바스크립트만을 위한 도구가 아니다.
웹페이지와 관련된 모든 자원(리소스)과 관계된 도구이다.
모든 자원을 번들링해서 내보낼 수 있다는 말이다.
예전부터 사용해왔던 웹 테스크 매니저에 관해 얘기해보자.
Grunt와 Gulp 같은 것들이 예전부터 있어 왔었던 웹 테스크 매니저이다.
웹 자동화 도구라고 생각하면 된다.
웹 자동화 도구가 하는 역할은,,
자바스크립트
- minifiers : 압축 -> 파일용량 줄이기 -> 웹페이지 로딩속도 개선
- linters : 문법 검사도구 -> 에러 최소화
- compile to js languages : babel 같은 도구를 활용해 es6 -> es5 문법 변환 등등…
CSS
- pre-processor(전처리기) : scss, sass, less .. 등등…
ASSETS
- svgo
- imagemin 등등…
여기서 주목해야될 점은 Gulp와 Grunt라는 웹 테스크 매니저는 파일을 유형별로 처리한다는 것이다.
스크립트 파일은 스크립트 파일로, CSS 파일은 CSS 파일로..
이렇게 각각 처리한다.
그리고 또한 스크립트를 직접 작성해줘야된다.