웹팩(webpack)
웹 애플리케이션의 소스들을 하나로 파일로 압축해주는 도구
웹팩은 최적화를 지원한다
웹팩은 트리쉐이킹(Tree Shaking)을 통해 브라우저의 최적화를 지원하는데
ES6(ES Modules) 모듈을 사용하는 경우에 한해, 프로덕션 모드에서 번들링 할 때 작동함
트리 쉐이킹(Tree Shaking)
말 그대로 나무를 흔드는 거임. 즉, 사용하지 않는 코드들을 제거하는 방식을 말함.
트리 쉐이킹 작동 조건
ES Module사용 (import,export)CommonJS(require,module.exports)에서는 안됨
- 프로덕션 모드에서 빌드
mode: 'production'설정이 되어 있어야 불필요한 코드가 제거됨 => 실제 코드 제거- 이 때
Webpack은 자동으로TerserPlugin을 통해 dead code도 제거함 => 번들 최적화프로덕션에서만 트리 쉐이킹이 이루어지는가?
개발 모드에서는 부분적으로 작동은 함. 하지만 실제로 코드가 제거되지는 않음.- 작동은 한다 : ES6 분석(import/export)하고 사용되지 않은 export를 체크는 하는데
- 제거는 안함 : 번들에는 여전히 포함되어 있음
왜냐면 개발 모드는 디버깅을 해야하는데 코드 난독화나 dead code를 제거하면 디버깅이 어려움
- 트리쉐이킹은 정적 분석으로 동적으로 호출되는 코드는 제거되지 않을 수 있음
트리 쉐이킹 작동 시점은 웹팩의 번들링 과정 중 최적화 단계
웹팩이 전체 의존성을 분석해서 사용되지 않는 모듈이나 export 식별하고, Terser 같은 최적화 플러그인에서 최종적으로 dead code를 제거함
그래서 웹팩 사용하면 이점
- 모듈 번들링 : 많은 소스 코드들(JS파일, css, 이미지 등)을 하나 또는 여러 개로 묶어줌
- 트리 쉐이킹 지원 : 사용하지 않은 js 코드들을 제거해서 파일 크기 감소
- 코드 스플리팅 : 페이지별로 필요한 코드만 로드해서 초기 로딩 속도 향상
- HMR(Hot Module Replacement) : 새로고침 없이 변경된 모듈만 실시간 반영해서 개발 효율 높임
- 다양한 로더(loader) 지원 : tyscript, scss, jsx, 이미지 등 다양한 파일 처리 가능 -> webpack.config.js에서 설정 가능
단점도 있음
- 진입 장벽 -> 설정이 복잡
- 대규모 프로젝트에서는 빌드 속도가 느릴 수 있음
webpack.config.js
프로젝트 웹팩 설정 중 잊어버릴것 같은 부분만 설명
// 설치한 라이브러리들 import 해주고
module.exports = (env, argv) => {
const isProduction = argv.mode === "production";
return {
mode: isProduction ? "production" : "development";
...code,
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html"),
}),
new Dotenv({
...code
})
]
}
}-
template: path.resolve(__dirname, "src", "index.html")
번들링을src의index.html부터 시작하겠다는 의미임.
그런데src에는index.html이 없음. (초기 리액트 프로젝트 세팅 때)
그래서src아래에index.html을 만들어줘야 함. -
/src에index.html생성 후<body> <div id="content"></div> </body>id는 아무거나 지정해도 됨.
-
/src의index.tsx에root아닌content로 변경- 왜냐, 웹팩 설정에서
/src의index.html부터 번들링하기로 했는데/public의root면 번들링이 안되기 때문
- 왜냐, 웹팩 설정에서
