웹팩의 tree-shaking
9189 단어 webpacktree-shaking
트리샤킹의 몇 가지 사용 상황을 먼저 보겠습니다.
상황 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 모듈
// ./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');
// ./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');
// ./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은 순수한 ES 모듈에서 가져오지 않은 구성원을 표시하고 코드 압축 도구를 사용하여 사용하지 않은 구성원을 삭제하고 부작용 코드를 안전하게 삭제하는 과정을 가리킨다.
tree-shaking은 순수한 ES 모듈을 겨냥하여 사용하지 않은 코드나 구성원, 그리고 가져온 다른 모듈을 제거할 수 있습니다.
순수한 ES 모듈
순수 ES 모듈에 대한 작업
side Effects 필드에 성명되지 않은 모듈(또는 성명false는 모두 순수한 ES 모듈임을 나타냄)에 대해tree-shaking은 부작용이 없는 모듈로 정적 분석을 하고 사용되지 않은 내보내기 구성원과 부작용 코드를 삭제합니다.
부작용 모듈에 대한 조작
sideEffects 필드에 부작용이 있는 모듈을 표시하면tree-shaking은 이 모듈의 코드를 완전하게 보존합니다
tree-shaking의 한계성
사용하지 않는 모듈을 지우는 방법
웹pack-deep-scope-plugin을 사용하여 작용역의 깊이를 훑어보고tree-shaking을 바탕으로 웹pack-deep-scope-plugin 플러그인을 추가합니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Qiita API v2를 Ajax에서 사용하기위한 webpack 설정 (로컬 개발 환경 전용)에서는 Qiita의 기사 목록, 사용자 세부 정보, 기사를 '좋아요'한 사람 목록 및 재고가 있는 사람 목록을 검색할 수 있습니다. Qiita 화면에서 기사를 재고한 사람을 볼 수 없기 때문에 API를 통해 기사를 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
