Module이란? 🧐

정의 📋

프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져 있는 형태

종류 🔩

1. 내장되어 있는 코어 모듈 (Built-in Core Module)
   ex. Node.js Module의 require('path')

2. 커뮤니티 기반의 모듈 (Community-based Module)
   ex. NPM
   - NPM CLI를 통해 접근(사용)해야 한다.
   npm install ModuleName

3. 로컬 환경에서 사용되는 모듈 (Local Module)

   • 특정 프로젝트에 정의된 모듈

장점 👍

1. 코드의 재사용성 향상
2. 모듈 이름을 기준으로 코드를 구조적으로 빠르게 파악 가능
3. 코드의 관리가 편해짐

Module 구현 시 주의사항 🚫

• 코드를 모듈화하는 기준이 명확해야 함

Bundle이란? 🧐

정의 📋

• 모듈들의 의존성을 안전하게 유지시키면서 하나의 파일로 만드는 과정
• 서로 참조관계를 가지고 있는 모듈들을 모아서 하나의 파일로 묶는 것

장점 👍

1. 모든 모듈을 로드하기 위해 검색하는 시간 단축

2. 사용하지 않는 코드 제거

   사용하는 파일만 남고 파일 크기가 줄어듬
   → 파일크기 감소
   → 웹 어플리케이션에 도움

• 리소스를 더 빠르게 불러옴
• 렌더트리를 그리기 위해 파싱하는 시점도 빨라짐
  => 사용자도 상대적으로 더 빠르게 컨텐츠를 볼 수 있음
  

3. 파일의 크기 감소
   • 별도의 파일들을 압축
   • 파일들이 한 곳에 번들링된 상태에서 압축
     

출처 📝

• Vue.js 압축 완성 올인원 패키지 Online - 패스트캠퍼스

위의 내용은 Webpack을 공부하며 개인적으로 정리한 내용입니다.
본문에 관련된 문제 사항이 있는 경우, 댓글로 남겨주시면 감사하겠습니다! 🙌