[web] tree-shaking 요약

webpack 기준

 

tree-shaking 적용 방법

1. bundle 시 commonjs로 transpile이 되면 안됨

 

.babelrc

https://babeljs.io/docs/babel-preset-env#modules

> Setting this to false will preserve ES modules.

{
  "presets": [
    ["env", {
      "modules": false
    }]
  ],
  "plugins": [
    ["transform-react-jsx", {"pragma": "h"}],
    "emotion"
  ]
}

 

2. 필요한 함수만 import

// asis
import * as utils from "../../utils/utils";

// tobe
import { simpleSort } from "../../utils/utils";

 

3. 필요 시 side-effect 설정

 - tree shaking 하기에 의존성이 있는 경우

 - 사용은 안하지만 선언은 되어야 하는 경우 ex) css-in-js

 

4. mode를 production으로 (dev일 때는 반영이 안됨)

// npm run dev (모든 함수 임포트)
Asset      Size   Chunks             Chunk Names
js/main.js  52.4 KiB     main  [emitted]  main
js/vendors.js   150 KiB  vendors  [emitted]  vendors

// npm run dev (필요한 함수만 임포트)
Asset      Size   Chunks             Chunk Names
js/main.js  52.2 KiB     main  [emitted]  main
js/vendors.js   150 KiB  vendors  [emitted]  vendors

// npm run prod (필요한 함수만 임포트 + webpack mode: production)
Asset        Size  Chunks             Chunk Names
js/vendors.a3722bf0.js    37.1 KiB       0  [emitted]  vendors
js/main.003ce51f.js    20.7 KiB       1  [emitted]  main

// npm run dev (필요한 함수만 임포트 + 바벨 설정)
Asset      Size   Chunks             Chunk Names
js/main.js  60.8 KiB     main  [emitted]  main
js/vendors.js   150 KiB  vendors  [emitted]  vendors


// npm run prod (필요한 함수만 임포트 + 바벨 설정 + webpack mode: production)
Asset        Size  Chunks             Chunk Names
js/vendors.b007c500.js    36.9 KiB       0  [emitted]  vendors
js/main.57a38a97.js    8.45 KiB       1  [emitted]  main

 

 

 

https://web.dev/articles/reduce-javascript-payloads-with-tree-shaking?hl=ko

트리 쉐이킹으로 자바스크립트 페이로드 줄이기  |  Articles  |  web.dev

 

https://webpack.kr/guides/tree-shaking/

Tree Shaking | 웹팩