웹 팩 이 tree-shaking 을 어떻게 우아 하 게 사용 하 는 지 알 아 보기(나무 흔 들 기 최적화)
웹 팩 2 가 가 져 온 최고의 새로운 특성 중 하 나 는 트 리 쉐 이 킹 이다.tree-shaking 은 rollup.js 에서 기원 되 었 으 며,현재 웹 팩 2 도 비슷 한 방법 이 있다.
웹 팩 의 tree-shaking 이 온 것 은 es6 규범 모듈 덕분 입 니 다.왜 이렇게 말 합 니까?현재 의 전단 모듈 은 규범 이 매우 많 고 유행 하 는 예 를 들 어 comonJS,AMD,es6 등 이 있 습 니 다.저 는 간단하게 comonJS 와 es6 모듈 의 차 이 를 말씀 드 리 겠 습 니 다.
commonJS 모듈
commonJS 의 모듈 규범 은 Node 에서 빛 을 발 하고 전체적으로 보면 그 특성 은 다음 과 같다.
1.동적 로드 모듈
comonJS 와 es6 의 가장 큰 차 이 는 아마 여기에 있 을 것 입 니 다.comonJS 모듈 의 동적 로 딩 은 게 으 른 로 딩 을 쉽게 실현 하고 사용자 체험 을 최적화 할 수 있 습 니 다.
2.전체 모듈 불 러 오기
commonJS 모듈 에서 내 보 낸 것 은 전체 모듈 입 니 다.
3.각 모듈 이 대상
commonJS 모듈 은 모두 하나의 대상 으로 간주 된다.
4.값 복사
commonJS 의 모듈 출력 은 함수 의 값 전달 과 비슷 하 며 모두 값 의 복사 입 니 다.
es6 모듈
1.정적 해석
즉,분석 단계 에서 출력 모듈 을 확정 하기 때문에 es6 모듈 의 import 는 일반적으로 도 입 된 파일 의 시작 에 쓰 인 다.
2.모듈 은 대상 이 아니다
es6 에서 각 모듈 은 하나의 대상 으로 보지 않 습 니 다.
3.불 러 오 는 것 은 전체 모듈 이 아 닙 니 다.
es6 모듈 에 서 는 한 모듈 에 export 내 보 내기 가 여러 개 있 는 것 을 자주 볼 수 있 습 니 다.
4.모듈 의 인용
es6 모듈 에서 내 보 낸 것 은 모듈 의 값 복사 가 아니 라 이 모듈 의 참조 입 니 다.
es6 모듈 과 comonJS 모듈 의 차 이 를 결합 한 후에 우 리 는 es6 의 특징 이 정적 해석 이라는 것 을 알 게 되 었 고 comonJS 모듈 의 특징 은 동적 해석 이 므 로 es6 모듈 의 정적 해석 을 빌려 tree-shaking 의 실현 이 가능 하 다.
웹 팩 에서 tree-shaking 은 필요 에 따라 불 러 오 는 것 을 말 합 니 다.즉,인용 되 지 않 은 모듈 은 포장 되 지 않 고 우리 의 가방 크기 를 줄 이 며 응용 프로그램의 불 러 오 는 시간 을 줄 여 사용자 에 게 더욱 좋 은 체험 을 보 여 주 는 것 을 말 합 니 다.
2.tree-shaking 사용 방법
이렇게 말 을 많이 했 는데 트 리 쉐 이 킹 을 어떻게 하 는 거 예요?
웹 팩 의 기본 es6 규범 으로 작 성 된 모듈 은 tree-shaking 을 사용 할 수 있 습 니 다.이게 무슨 뜻 이 죠?다음은 예 를 들 어 보 겠 습 니 다.
우선 제 demo 디 렉 터 리 를 아래 와 같이 드 립 니 다.
├─dist
└─index.html
├─node_modules
└─...
├─src
├─scripts
├─assets
├─webpack.config.js
└─package.json
dist 는 포 장 된 코드 를 저장 하 는 데 사 용 됩 니 다.
src 반대로 원본 파일 저장
src 의 scripts 디 렉 터 리 는 js 스 크 립 트 파일 을 저장 하고 assets 는 정적 자원 파일 을 저장 합 니 다.
다음 몇 가지 명령 이 있 으 면 트 리-shaking 여행 을 시작 하 겠 습 니 다.
npm install --save-dev webpack webpack-dev-server
webpack.config.js
const webpack = require('webpack')
const path = require('path')
module.exports = {
entry:'./src/scripts/main.js',
output:{
path:path.resolve(__dirname,'dist/'),
filename:'main.bundle.js'
},
plugins:[
new webpack.HotModuleReplacementPlugin()
],
devServer:{
port:4200,
contentBase:path.resolve(__dirname,'dist/'),
historyApiFallback:true,
hot:true
}
}
import { sayHello } from './greeter.ts'; sayHello();상응하는 main.js 의 의존 greeter.js
export function sayHello(){
alert('hello')
}
export function sayWorld(){
alert('world')
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="./main.bundle.js"></script>
</body>
</html>포장 후 지루 한 코드 를 제거 하고 chunk 참조 부분 만 보기:
[
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__person__ = __webpack_require__(1);
Object(__WEBPACK_IMPORTED_MODULE_0__person__["a" /* sayHello */])();
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return sayHello; });
/* unused harmony export sayWorld */
function sayHello(){
alert('hello');
}
function sayWorld(){
alert('world');
}
/***/ })
/******/ ]
우 리 는 이 줄 에 관심 을 가진다.
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return sayHello; });그래서 우 리 는 지금 전체 Js 코드 를 압축 하면 인용 되 지 않 은 sayWorld 를 제거 할 수 있다.
다음 명령 을 입력 하여 압축 합 니 다.
webpack --optimize-minimize압축 된 코드 가 한 줄 밖 에 없 기 때문에 우 리 는 꼬리 부분 을 옮 깁 니 다.
function(e,n,r){"use strict";function t(){alert("hello")}r.d(n,"a",function(){return t})}]);웹 팩-dev-server 를 시작 합 니 다.
webpack-dev-server브 라 우 저 에 입력http://localhost:4200
매번 명령 줄 에 인 자 를 입력 해 야 합 니 다.귀 찮 지 않 습 니까?더 좋 은 방법 이 있 습 니까?
(1)이 명령 을 package.json 의 scripts 필드 에 넣 고 npm start 를 통 해 자동 으로 실행 할 수 있 습 니 다.
(2)사실 Coptimize-mainimize 의 바 텀 구현 은 플러그 인 UglifyJSPlugin 이기 때문에 웹 팩.config.js 에서 직접 설정 할 수 있 습 니 다.
웹 팩.config.js 에 플러그 인 설정
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry:'./src/scripts/main.js',
output:{
filename:'main.bundle.js',
path:path.join(__dirname,'dist')
},
plugins:[
new webpack.optimize.UglifyJsPlugin(), // <----------- js
new webpack.HotModuleReplacementPlugin()
],
devServer:{
port:4200,
historyApiFallback:true,
hot:true,
contentBase:path.join(__dirname,"dist/")
}
}
같은 효 과 를 보 는 것 이다.
function(e,n,r){"use strict";function t(){alert("hello")}r.d(n,"a",function(){return t})}]);그럼 type:script 이 라면 tree-shaking 을 어떻게 사용 해 야 하나 요?
3.type:script 에서 tree-shaking 을 사용 하 는 방법
웹 팩 에서 ts 를 사용 하려 면 먼저 tsc 를 설치 해 야 합 니 다.
npm install --save-dev typescript그 다음 에 ts 파일 을 분석 하 는 loader 가 필요 합 니 다.npm install --save-dev ts-loader그리고 웹 팩.config.js 에서 설정 합 니 다.
const webpack = require('webpack')
const path = require('path')
module.exports = {
entry:'./src/scripts/main.ts',
output:{
path:path.resolve(__dirname,'dist/'),
filename:'main.bundle.js'
},
module:{
rules:[
{
test:/\.ts$/,
use:['ts-loader']
}
]
},
plugins:[
new webpack.optimize.UglifyJsPlugin(),
new webpack.HotModuleReplacementPlugin()
],
devServer:{
port:4200,
contentBase:path.resolve(__dirname,'dist/'),
historyApiFallback:true,
hot:true
}
}
main.ts
import { sayHello } from './greeter.ts';
sayHello();
export var sayHello = function(){
alert('hello')
}
export var sayWorld = function(){
alert('world')
}
다음은 제 tsconfig.json 파일 입 니 다.
{
"compilerOptions":{
"target":"es5",
"sourceMap":true
},
"exclude":[
"./node_modules"
]
}이어서 저희 웹 팩.
압축 된 코드 의 마지막 부분 을 보 세 요:
"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.sayHello=function(){alert("hello")},n.sayWorld=function(){alert("world")}}]);이것 은 tsc 가 컴 파일 한 코드 가 es5 이기 때 문 입 니 다.그 렇 기 때문에 tsc 는 기본적으로 comonJS 의 규범 을 사용 하여 모듈 을 불 러 옵 니 다.그래서 tree-shaking 을 촉발 하지 않 았 습 니 다.그러면 우 리 는 어떻게 해 야 합 니까?
tsconfig.json 을 수정 하고 target 을 es6 로 바 꾸 면 됩 니 다!
{
"compilerOptions":{
"target":"es6",
"sourceMap":true
},
"exclude":[
"./node_modules"
]
}포장 한 bundle 을 보 세 요.
function(e,n,r){"use strict";r.d(n,"a",function(){return t});var t=function({alert("hello")}}]);webpack-dev-server 열기
webpack-dev-serverHello 를 성공 적 으로 인쇄 한 것 을 볼 수 있 습 니 다.
이상 은 제 가 webpack tree-shaking 에 대한 정리 입 니 다.여러분 의 학습 에 도움 이 되 었 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
