Webpack에서 데드 코드/트리 쉐이킹을 제거하여 번들 크기 최적화

최신 자바스크립트 앱을 빌드할 때(브라우저 또는 서버 측 사용에 관계없이) 종속성이 무엇인지, 이러한 종속성에서 무엇을 활용하는지 아는 것이 중요합니다. 이에 주의하지 않으면 번들 크기가 매우 커져 사용자 경험이 저하될 수 있습니다. 특히 이것이 모든 바이트가 중요한 브라우저 기반 애플리케이션인 경우.

오늘 저는 트리 쉐이킹이라는 번들 크기를 최적화하는 매우 효과적인 방법에 대해 이야기하고 싶습니다.

전통적으로 모듈을 설치하고 모듈에서 사용하는 메서드를 가져옵니다. 많은 모듈에서 메소드는 별도로 내보내지지 않으며 기본 가져오기에서 분해하는 것을 반대하는 단일 기본 내보내기의 일부입니다. 이에 대한 가장 일반적인 예는 다음과 같습니다.

import { Box } from "@material-ui/core"

이 결과 webpack은 모든 모듈 메서드를 묶습니다. 우리가 그것들을 사용하지 않더라도.
이것을 피하는 몇 가지 방법이 있습니다. lodash와 같은 일부 라이브러리에서는 필요한 항목만 설치할 수 있습니다. 전체 lodash 라이브러리를 설치하는 대신 lodash.get 또는 lodash.trottle과 같이 필요한 모듈만 설치할 수 있습니다.

또 다른 방법은 우리가 여전히 전체 라이브러리를 설치하지만 번들을 패키징할 때 더 큰 라이브러리의 일부만 가져오고 있음을 webpack에 알리는 트리 쉐이킹입니다.

https://material-ui.com/guides/minimizing-bundle-size/#option-1

대신에:

import { Box } from "@material-ui/core"

이 작업을 수행:

import Box from "@material-ui/core/Box";

마찬가지로, lodash 예: 대신:

import { groupBy } from "lodash";

이 작업을 수행:

import groupBy from "lodash/groupBy";

대체 방법

이것을 할 수 있는 babel 플러그인도 있습니다: babel-plugin-tree-shaking-import

일관된 가져오기 규칙

트리 쉐이킹에 대해 주의해야 할 또 다른 핵심 사항은 코드 전체의 일관성입니다. 모듈 가져오기의 모든 인스턴스가 모듈 경로를 가리키도록 일관되게 수행되어야 합니다. 모듈을 가져온 다음 필요한 부분을 분해하는 기존 방식의 단일 인스턴스는 전체 모듈을 번들로 다시 묶는 결과를 낳습니다.

babel 플러그인을 사용하는 또 다른 이유는 이를 자동으로 수행하기 위해서입니다.


이 게시물은 내 개인 블로그에 처음 게시되었습니다: https://mfyz.com/optimize-your-bundle-size-by-eliminating-dead-code-tree-shaking-in-webpack/