Status

• 죽일놈의 번들러
• 아 예전 인턴할때 webpack, babel로 밤 꼬박 새웠던 기억이 막 났다..
  • 아예 개념이 없었다고 생각함
  • 아직도 eslint랑 헷갈리고 그래

번들러

• 개념
  Webpack(웹팩)은 대표적인 자바스크립트 모듈 번들러(Module Bundler)로, 많은 기능과 확장성으로 좀 더 복잡한 프로젝트에서도 효율적으로 모듈을 관리할 수 있도록 도와줍니다.
• 모듈을 관리하는 것

  • package.json은 말그대로 패키지 버전 관리라면

  • webpack의 관리대상 컴포넌트된 자원들을 하나의 java"script" 변환해줌

    • html
    • css
    • js
    • svg/png 등 이미지파일
    • JSX babel

webpack -1

webpack -2

왜 쓸까?

1. 여러개의 자바스크립트를 하나로 만듦
2. 웹사이트 성능 향상
3. 다른 기능을 제공한다고함 ( code-split, loader, plugin으로 확장가능, webpack-dev-server 디버깅)

react 와 차이점

1. 다양한 프레임워크, 라이브러리에 적용가능함 (react, vue, angular)

• react는 프레임워크이자 라이브러리로 주로 상태관리 해주는데
  • 웹펙은 config에서 그외 라이브러리(vue, angluar) 및 언어에 맞춰 custom 하게 기능을 추가해준다는 장점이 있음.

2. 최적화를 통해 react를 개발하는데 도움을 줆
   react: component 기반 ( 재사용성, 독립성 , 유지보수및 가독성)
   webpack: module hanlder ! ( 하나의 bundle 로 묶어서 의존성 관리를 해줌/ network 요청수를 줄여주고, 로딩속도 개선. )
3. 세팅이 복잡함
   3-1 . production 모드로 자동 최적화
   3-2. code-split
   3-3. caching 사용 : 파일이름을 캐싱으로 만들어서, webpack이 번들링한 파일을 hash화 해서 로컬캐시(브라우저 캐시 메모리)에 저장후 해당 파일을 캐싱해서 사용함 .
   3-4. bundle-size 사용 : 최종 파일 사이즈 > 모듈이 클수록 해당 모듈을 code split 로 줄일수 있다고함
   heroicons = svg@webpack 이용해서 과부하 줄이기
   고찰 > 번들사이즈 >

webpack은 왜 번들사이즈가 클까요?

커지게 되는 이유

• 불필요한 라이브러리 (lodash, moment 같은것)

• 중복 모듈 (import의 중요성)

• 최적화 설정 미완시

• tree shaking : unused 는 최종 번들에서 제거해서 로드함 (번들크기 줄임)
  - 조건 1. es6 모듈서야한다고 함
  - 조건 2. production 환경 (자동 적용)

  # utils
  export function used(){
  console.log("this function is used");}
  
  export function unused(){
  console.log("is not used");
  }
  		# main.js
  import {used{ from './utils';
  
  used();

• code splitting : button click event 시에만 component 모듈 로드

   # main.js
   function loadComponent(){
   import('./component')
   .then(({default: component})=>{
    document.body.appendChild(component());
   })
   .catch((error)=>
          console.error("Error loading!",error));
   }
  document.getElmdocument.querySelector('button').addEventListener('click', loadComponent);

해결방안

• 라이브러리 import 는 개별적으로 필요할때만 쓰자
• code splitting 을 활용 : 초기 로딩시 불필요한 코드는 제외
• tree shaking
• webpakc-bundle-anlyzer :크기 시각화 최적화
• 더 가벼운 라이브러리르 찾자!

그 외 icon 등 theme 관련 사이즈 줄이는 고찰

• bundler
• svgr git

번들 사이즈 줄이기

따라 만든것

• npm으로 해결이 안될때, npx로 해보는 경우
  npx -g create-react app 시도, 실패

웹팩 key관련글