안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있는 Anne입니다.
웹팩4 릴리즈 이후 거의 2년 만인 작년 10월 10일, 웹팩5가 릴리즈 되었습니다. 아직 1년이 채 안됐는데요, 웹팩5로 넘어오면서 이전과 어떤 점이 달라졌는지 알아보겠습니다. 상당히 많은 업데이트가 있었기 때문에 General direction에 안내되어 있는 내용 위주로만 정리해보았습니다. 더 자세한 내용은 Webpack 5 release 전체 문서를 참고해주세요.
주요 변경 사항
Persistent Caching - 파일시스템 캐시를 이용한 더 빠른 빌드
웹팩5에서는 아래와 같이 미리 설정을 할 경우 파일시스템 캐시를 사용할 수 있고 이를 통해 더 빠른 빌드가 가능해졌다고 합니다.
module.exports = {
cache: {
// 1. 캐시 타입을 파일시스템으로 설정해주세요.
type: 'filesystem',
buildDependencies: {
// 2. 설정이 변경될 경우 캐시 무효화가 되도록
// build dependency에 설정 파일을 추가해주세요.
config: [__filename],
},
},
};
Long Term Caching - 알고리즘 개선을 통한 장기간 캐싱 가능
번들 크기와 캐싱은 애플리케이션 로딩 시간을 개선할 수 있는 중요한 요소입니다. 웹팩5에서는 주석이나 변수명을 변경하는 정도의 코드 변경으로는 캐시 무효화가 발생하지 않도록 알고리즘을 개선함으로써, 더 오랜 기간 캐싱이 가능해졌다고 합니다.
트리 쉐이킹(Tree shaking) 개선을 통한 번들 크기 감소
웹팩4에서부터 사용하지 않는 코드(dead code)를 제거하는 트리 쉐이킹이 가능해졌었는데요, 웹팩5에서는 이 기능을 더 개선하여 번들 사이즈를 기존보다 더 많이 줄일 수 있게 되었다고 합니다.
[개선 내용]
-
중첩 트리 쉐이킹(Nested tree-shaking) import 해온 모듈 내부에 있는 코드 중 사용하지 않는 코드도 트리 쉐이킹
-
내부 모듈 트리 쉐이킹(Inner-module tree-shaking) 새롭게 추가된 옵션인
optimization.innerGraph을 통해 모듈 내의 export와 import 사이의 의존성까지 분석하여 트리 쉐이킹 -
CommonJs 트리 쉐이킹 일부 CommonJs 구문에 대한 트리 쉐이킹도 지원
-
기타
export *가 더 많은 정보 제공export *사용 시, 서로 충돌되는 exports가 있을 경우 경고import()에 magic comment 중 하나인webpackExports를 사용하여 모듈에 대해 수동으로 트리 쉐이킹 가능
Deprecated 항목 제거
웹팩4에서 deprecated된 항목들이 웹팩5에서는 아예 제거되었습니다.
기본 지원하던 Node.js 폴리필 제거
웹 플랫폼에서 지원되지 않기도 하고 자주 사용되지 않음에도 불구하고 번들에 포함되어 있던 Node.js 핵심 모듈들에 대한 폴리필들을 더 이상 자동적으로 지원하지 않기로 했다고 합니다. 웹 플랫폼과의 호환성을 더욱 향상시키기 위함이라고 하네요.