[build] 사용하지 않는 import도 번들링에 포함이 될까?

프로젝트의 최적화를 위해서 번들링 사이즈를 줄이고자 하였다. 그런데 한 파일에서 import는 되어있으나 사용하지 않는 경우도 빌드 시 번들링에 포함되었었다. 그래서 이 부분에 대해서 한 번 지피티와 대화하였다.

• 해당 패키지는 typescript였다.

typescript는 CommonJS패키지

• typescript는 CommonJS패키지인데, CommonJS는 트리쉐이킹(Tree-shaking)이 거의 안된다.

import { isConstructorDeclaration } from 'typescript'

이와 같이 선언하고 사용을 안해도 빌드 시에는 포함되어서 사이즈가 늘어난다는 것이다.

ESM vs CommonJS

• Tree-shaking의 경우에는 안쓰는 코드를 제거해서 번들 사이즈를 줄이는데, ESM은 잘된다.

• ESM(ES Modules)은 태생적으로 정적(static) 구조 이기 때문이다.

import { foo } from './utils.js'

• util.js를 불러오기 전에 어떤 export를 사용할지 정하고, 나머지는 필요없다고 번들러가 미리 계산하여 제거를 할 수 있기에 Tree-shaking이 잘 된다.

CommonJS는 반대로 동적(Dynamic)이라 분석이 어렵다

const utils = require('./utils')

• utils안에는 뭐가 있고 어떻게 쓸지를 번들러가 알 수 없다.
• 그렇기에 번들러는 안전하게 다 포함시키게 되는 것이다.

그래서 또다른 예시로 lodash가 있는데, lodash-es 패키지를 활용해서 트리쉐이킹에 사용하기도 한다.

정적 : 미리 읽고 계획을 세울 수 있음
동적 : 실행해보기 전에는 뭘 쓸지 모른다.

엄청 와닿지는 않을 수 있지만, 프로젝트 개발을 하면서 안쓰는 것은 지우고, 모듈시스템에서 패키지들을 잘 관리하여 필요한 것들만 번들링할 수 있도록 점검하는 것이 좋을 것 같다.