프론트엔드 빌드 도구 및 공학적 설계
Webpack의 핵심 구성 요소와 최적화 전략
Webpack은 모듈 기반 개발 환경에서 자바스크립트 외 파일 형식을 처리할 수 있도록 하는 중심적인 빌드 시스템이다. 그 작동 원리는 다음과 같은 핵심 개념들로 구성된다.
Loader
원본 파일(예: .css, .less, .ts)을 자바스크립트 모듈로 변환하는 역할을 한다. 각 로더는 하나의 함수이며, 입력된 소스를 처리하여 다음 로더 또 ...
7월 14일 20:19에 게시됨
트리셰이킹을 활용한 프론트엔드 성능 최적화 기법
트리셰이킹의 개념과 작동 원리
트리셰이킹은 불필요한 자바스크립트 코드를 정적 분석을 통해 제거하는 최적화 기법입니다. 이 용어는 '나무를 흔들어 쓸모없는 잎사귀를 떨어뜨리는 것'에 비유되며, 실제 구현에서는 코드의 추상구문 트리(АST)를 기반으로 사용되지 않는 모듈이나 함수를 식별하고 삭제합니다.
이 기법은 ES6 모듈 시스템의 정적 구조성에 의존합니다. ...
6월 10일 22:51에 게시됨