웹팩(Webpack)을 이용한 웹앱의 번들 크기를 줄이는 방법들

• 번들 분할
  • 웹팩과 같은 웹 번들러는 코드 및 코드 사이의 종속성을 분석
  • 단일 파일로 번들
  • 가장 적합하게 분할 하려 함
    • 이를 분할하는 프로세스를 번들 분할이라고 함
 
• 터서(Terser)
  • 웹팩이 코드를 최소화하고 최적화하기 위해 사용하는 도구
  • 변수와 함수의 이름을 미니마이즈하고 (가능한 작게 변경)
  • 트리쉐이킹 이라는 프로세스 수행으로, 어플리케이션에서 사용되지 않는 코드 제거
    • 이때, 코드가 앱의 동작에 영향을 조금이라도 줄 경우 제거 하지 않음
    • 트리쉐이킹은 매우 복작한 프로세스라 기능이 손상되지 않도록 신중하게 수행되어야 함
    • ESModule 보다 CommonJS 의 트리쉐이킹이 더 적게 일어남
      • ESModule = 새로운 표준, CommonJS = 오래된 모듈 표준
 
• 번들 크기 측정
  • 웹팩에서는  Webpack Bundle Analyzer 도구가 매우 유용
 
• 번들 크기 문제 해결
  • ESModule이 아닌 종속성 확인
    • package.json 파일 내에 module 항목 중에서 ESModule을 제공하는 모듈이 있는지 확인 및 업데이트
    • 예를 들어, react-query는 현재 ESModule 릴리스를 포함하여 @tanstack/react-query로 변경되었음
 
• 배럴(Barrel)
  • 배럴(Barrel) 파일은 자바스크립트 앱에서 일반적인 패턴이지만, 예상치 못한 실수로 파일을 번들로 가져오기 쉬움
    • 배럴 파일은 다른 파일에서 내보내기를 다시 내보내는 파일

    export * from "./someFile";
    export * from "./someOtherFile";
    

    • 이렇게 하면 가져오기를 깔끔하게 유지하는 데 편리할 수 있지만, 다시 내보내는 파일 중 하나에 사이드 이펙트가 있을 경우 번들로 제공됨
    • 이 문제는 사용중인 가져오기가 다시 내보낸 파일에도 없는 경우에도 발생
      • 사이드 이펙트 = 파일을 가져오기만 하고 함수를 호출하지 않아도 실행되는 동작들이 있는 경우
    • 이 문제를 해결하는 한 가지 방법은 모든 배럴 파일에 index.js 와 같이 쉽게 식별할 수 있는 이름을 지정하는 것
    • 이러한 방식은 배럴의 와일드카드 내보내기를 사용하면서 실수로 중복 내보내기가 발생할 수 있는 것에 비해 정확성이 약간 향상됨
    • 명명된 내보내기를 명시적으로 내보내면 내부 파일 간에 사용되는 내보내기 대신 다른 패키지에 노출할 항목만 내보내므로 캡슐화도 개선됨
 
• 지연로딩 (Lazy Loading)
  • 지연 로딩은 잘 생각하지 않으면 오히려 더 많은 문제를 일으킬 수 있음
  • 예를 들어, 프로세스가 시작될 때 사용자가 기다리고 있는 파일을 구문 분석하기 위해 코드를 로드하면 사전에 로드하는 것보다 사용자 환경이 나빠질 수 있음
  • 사용자 경험을 저해하지 않고 번들을 적절하게 분할하는 방식으로 앱을 분할할 수 있도록, 지연 로드가 일어날 위치를 생각하는 것이 중요
  • 방법
    • React App 의 지연로딩 활용

    const LazyViewer = React.lazy(() => import("./Viewer")); 
    const App = () => ( 
        <Suspense fallback = {<Spinner />}> 
            <LazyViewer /> 
        </Suspense>
    );

    • 프리패치, 프리로드 활용
 
• 결론
  • 웹 앱의 번들 크기를 개선하기 위해 노력해보자
  • 위 글은 일반적인 방법을 무작정 적용하기 보단, 그로 인한 장단과 영향성이 무엇인지 이해하고 최적화를 수행하기 위해 도움이 됨

 

참고)

아래 원문에 타입스크립트 사용시 사용할 포인트들도 있다.

https://madelinemiller.dev/blog/reduce-webapp-bundle-size/