Tree shakable module

bang9dev·2022년 1월 19일
0

https://blog.theodo.com/2021/04/library-tree-shaking/

https://ui.toast.com/weekly-pick/ko_20180716

cjs 의 경우 동적으로 선언됨, esm 의 경우 정적으로 선언됨
그래서 트리 쉐이킹을 제공 하려면, esm 모듈이 필수 요소

package.json 의 sideEffects: boolean 옵션은 모듈 import 에 사이드 이펙트가 없는 경우에만 true 로 설정
sideEffect 란, 쉽게말해 import 시에 실행되는 코드가 있을경우 (ex: polyfill)
예를들면 아래 코드에서 someModule 은 사용되지 않지만, 사이드이펙트가 있을 수 있으므로 트리 쉐이킹되면 안된다.

import { someModule } from 'lib';

console.log('not used module');

// lib.js
export const someModule = { ... };

// 글로벌 모듈을 교체하는 등의 사이드 이펙트를 일으킬 수 있는 행동들이, 모듈 import 시에 실행된다.
global.someModule = { ... };

0개의 댓글