즐코

개요 코드 재사용과 같은 유지보수 측면에서 파일을 여러 개로 분리해서 개발하기 시작했다. 이렇게 분리된 파일을 module이라고 하는데, module의 개념이 등장하면서 웹팩이 나오게 되었다. 즉, 모듈이 많아질수록 브라우저가 서버에 요청하는 수가 증가 => 네트워크 비용도 증가 => 페이지 로딩 시간이 up 되는 것이다. 따라서, 개발할땐 모듈로 나눠서 개발하지만 웹서버 배포할 때는 하나의 파일로 묶어서 배포하게 된다. 하나의 모듈을 묶는 작업을 bundling 이라고 하며 여러 개의 파일을 하나로 묶어주는 도구가 module bunlder이다. 모듈 번들러는 여러 종류가 있는데 그 중 인기 많은 모듈 번들러가 바로 webpack 이다! 보통 리액트, 넥스트, 뷰 등 라이브러리, 프레임워크를 설치하면 ..

코드 치는 것만 신경썼지 웹팩에 대해서 전혀 신경을 안 쓰고 있다가 번들링 파일인 chunk-vendor.js 와 app.js가 매우매우 용량이 커서 네트워크 탭 상에서 빠른 3G나 느린 3G로 네트워크 설정을 할 경우 첫 로딩 속도가 어마어마하게 느린 걸 깨달았다. SPA가 가지고 있는 단점을 느낄 수 있게 흰 화면이 30초 넘게 유지됐다ㅋ 어떤 라이브러리가 많은 크기를 차지하는지 알아야 했고, 그것을 최소화해 번들 사이즈를 최적화할 필요가 있었다. 아래의 패키지 도움을 받았다. https://www.npmjs.com/package/webpack-bundle-analyzer npm i -D webpack-bundle-analyzer webpack 설정 상에 설치한 플러그인을 추가해준다. 이 때 그냥 기..