[TIL] 모듈 번들러

모듈:  프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위
웹펙에서의 모듈: 웹 애플리케이션을 구성하는 모든 자원

모듈 번들러: 의존성이 있는 리소스(html,css,js,img)를 각각의 모듈로 보고 하나 또는 여러개의 파일로 묶어주는 도구
리소스: 웹 애플리케이션을 구성하는 모든 자원

기존의 페이지 별 자바스크립트 방식의 문제

• 의존성 순서 비보장 문제
• 일부 파일 에러 -> 전체 에러 문제

번들러(웹팩) 장점

• 여러 타입으로 구성된 여러 리소스파일들을 받으면 다수의 http통신이 발생하여 웹 로딩 속도 저하로 이어질 수 있다.
  • 번들러는 파일을 하나로 합쳐 이 문제를 해결한다.
• 성능 최적화 및 자동화
  • 코드 축소 및 트리쉐이킹
• 코드 스플릿을 통한 lazy loading
  • 필요한 코드를 필요할 때 로딩
• 종속성 문제 해결
• minify css 프로세싱 자동화
• 속도
• 모듈단위 개발 가독성과 유지보수
• 크로스 브라우징
• 개발자의 자유로운 빌드시스템 컨트롤

next.js에서의 웹팩 컨트롤

https://nextjs.org/docs/app/api-reference/next-config-js/webpack- 

next.config.js Options: webpack | Next.js

//next.config.js

module.exports = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    // Important: return the modified config
    return config
  },
}

 

vite 장점

• 빌드속도
• 개발 체험(브라우저에서 직접 모듈을 가져옴)

단점

• 다양하지 못한 라이브러리