트리샤킹의 몇 가지 사용 상황을 먼저 보겠습니다.

상황 1

// ./common/util.js
import lodash from 'lodash-es';

var func1 = function(v) {
     
  alert('111');
}

var func2 = function(v) {
     
  return v;
};

export {
     
  func1,
  func2
}

// ./index.js
import {
      func2 } from '../common/util';

var a = func2(222);

console.log('this is index page');

결과: 생산 모드tree-shaking을 열었을 때 패키지 결과에lodash가 포함되지 않았습니다

상황 2

// ./common/util.js
import lodash from 'lodash-es';

var func1 = function(v) {
     
  alert('111');
  return lodash.isArray(v);
}

var func2 = function(v) {
     
  return v;
};

export {
     
  func1,
  func2
}

// ./index.js
import {
      func2 } from '../common/util';

var a = func2(222);

console.log('this is index page');

결과: 생산 모드tree-shaking을 열었을 때 패키지 결과는lodash를 포함합니다

상황 3

// ./common/util.js
import lodash from 'lodash-es';

var func1 = function(v) {
     
  alert('111');
  return lodash.isArray(v);
}

var func2 = function(v) {
     
  return v;
};

export {
     
  func1,
  func2
}

// ./index.js
import {
      func2 } from '../common/util';

var a = func2(222);

console.log('this is index page');

웹pack-deep-scope-plugin을 사용하여 작용역 깊이를 훑어본 결과: 생산 모드tree-shaking을 열 때 패키지 결과는lodash를 포함하지 않습니다

tree-shaking

tree-shaking은 순수한 ES 모듈에서 가져오지 않은 구성원을 표시하고 코드 압축 도구를 사용하여 사용하지 않은 구성원을 삭제하고 부작용 코드를 안전하게 삭제하는 과정을 가리킨다.
tree-shaking은 순수한 ES 모듈을 겨냥하여 사용하지 않은 코드나 구성원, 그리고 가져온 다른 모듈을 제거할 수 있습니다.

순수한 ES 모듈

순수한 ES 모듈 내부 또는 그 내부 구성원은 다른 ES 모듈에 의존하지 않습니다

순수 ES 모듈은 다른 비 ES 모듈을 가져오지 않습니다

순수 ES 모듈은 가져오기와 내보내기를 제외하고는 여분의 코드가 없습니다

순수 ES 모듈에 대한 작업

side Effects 필드에 성명되지 않은 모듈(또는 성명false는 모두 순수한 ES 모듈임을 나타냄)에 대해tree-shaking은 부작용이 없는 모듈로 정적 분석을 하고 사용되지 않은 내보내기 구성원과 부작용 코드를 삭제합니다.

그러나 부작용 코드가 외부 모듈을 인용하면 외부 모듈의 가져오기는 삭제되지 않습니다..

부작용 모듈에 대한 조작

sideEffects 필드에 부작용이 있는 모듈을 표시하면tree-shaking은 이 모듈의 코드를 완전하게 보존합니다

tree-shaking의 한계성

웹팩은 먼저 자원을 불러온 다음에 정적 분석 결과에 따라 무용 코드를 삭제하기 때문이다.따라서 자원을 가져와서 사용하면 이 자원은 포장됩니다.미사용 구성원과 부작용 코드를 삭제할 때 구성원이나 부작용 코드를 사용하지 않고 가져온 모듈을 사용하면 이 모듈은 웹팩에 의해 결과에 포장되지만 실제로는 이 모듈이 사용되지 않아 불필요한 모듈을 포장합니다

tree-shaking은 정적 분석을 할 때 부작용 코드와 함수 내부 코드가 모듈에 대한 사용을 표시할 수 없기 때문에 모듈을 사용하면 이 모듈은 포장됩니다

따라서tree-shaking은 구성원이나 부작용 코드를 사용하지 않은 다른 모듈도 패키지 결과에서 삭제하는 기능을 추가해야 한다..

사용하지 않는 모듈을 지우는 방법

웹pack-deep-scope-plugin을 사용하여 작용역의 깊이를 훑어보고tree-shaking을 바탕으로 웹pack-deep-scope-plugin 플러그인을 추가합니다.