프론트엔드 최적화
-
Webpack4 패키지 최적화프론트엔드 최적화 2023. 10. 16. 21:54
Webpack 마이그레이션을 진행하면서, 사이드 이펙트를 발생시키지 않고 소스 코드의 구조 변경을 최소화하는 최적화에 대해서 고민을 하며, 어떤 최적화를 할 수 있을까 하다 '패키지 최적화'를 진행하기로 선택하였다. 번들링의 방식과 구조를 변경하면서 사이즈를 축소시키고, 웹 페이지 리소스 로딩 속도 개선을 충분히 할 수 있었기 때문이다. 사실, 렌더링 최적화와 로직 최적화는 기존 레거시 구조에서 변경시키는데 상당히 많은 변화를 발생시키기 때문에 선택할 여지가 없었기도 한다. 번들링 사이즈 측정은 webpack-bundle-analyze로 하였고, Chrome의 Network 기능과 Lighthouse를 통하여 측정하였다. 측정결과 [webpack-bundle-analzye] Parsed Size: 10...
-
Gulp + Webpack 3를 Webpack 4로 마이그레이션 해보자프론트엔드 최적화 2023. 10. 14. 16:16
기존 구조를 변경하게 된 이유 기존 빌드 시스템은 gulp를 통하여 자동화 task로 자바스크립트 파일을 제외한 정적 자산 파일(html, css, svg, png, jpg font 등)를 생성하며 특히, image sprite를 통하여 여러 장의 이미지를 한 장의 이미지를 생성하는 등의 작업을 한 후에 build하고, webpack을 통하여 자바스크립트 파일을 빌드하는 시스템이었다. gulp는 유닛 테스트, 최적화 등 반복 가능한 작업들을 자동화하는 빌드 시스템이다. pipe를 통하여 동시에 여러 task를 수행하고, 스트림 기반이기 때문에 node.js의 강점을 잘 살려, 실제 빌드 및 작업 속도가 webpack보다 빠른 것으로 알려져 있다. webpack은 모든 모듈(html, css, js, 등 ..