Webpack에서 나무 떨림을 사용하는 방법?

Question

각도 2 (버전 rc.2) 앱 (Typescript 포함)을 사용하여 webpack 2.1.0-beta.15로 업데이트했지만 나무 떨림 기능을 사용하는 방법이 궁금합니다. 나는 "out of the box"에서 작동해야한다고 읽었지 만, 아주 간단한 응용 프로그램을 위해 1.7Mb의 묶음을 가지고 있으므로, 아마도 나는 잘못된 것을하고있을 것입니다.

tsconfig.json

{ 
    "compilerOptions": { 
    "target": "es5", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false 
    }, 
    "exclude": [ 
    "node_modules", 
    "typings/main", 
    "typings/main.d.ts" 
    ] 
} 

package.json

{ 
    "name": "angular2-quickstart", 
    "version": "1.0.0", 
    "scripts": { 
    "build": "webpack --progress", 
    "build:prod": "webpack -p --progress --optimize-minimize", 
    "postinstall": "typings install", 
    "serve": "webpack-dev-server --inline --progress --output-public-path=/dist/" 
    }, 
    "license": "ISC", 
    "dependencies": { 
    "@angular/common": "2.0.0-rc.2", 
    "@angular/compiler": "2.0.0-rc.2", 
    "@angular/core": "2.0.0-rc.2", 
    "@angular/forms": "0.1.0", 
    "@angular/http": "2.0.0-rc.2", 
    "@angular/platform-browser": "2.0.0-rc.2", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.2", 
    "@angular/router": "2.0.0-rc.2", 
    "@angular/router-deprecated": "2.0.0-rc.2", 
    "@angular/upgrade": "2.0.0-rc.2", 
    "angular-pipes": "1.4.0", 
    "bootstrap": "3.3.6", 
    "core-js": "2.4.0", 
    "file-loader": "0.9.0", 
    "jquery": "2.2.3", 
    "lodash": "4.13.1", 
    "reflect-metadata": "0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "script-loader": "0.7.0", 
    "style-loader": "0.13.1", 
    "url-loader": "0.5.7", 
    "zone.js": "0.6.12" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.0.0", 
    "css-loader": "0.23.1", 
    "html-loader": "0.4.3", 
    "json-loader": "^0.5.4", 
    "raw-loader": "0.5.1", 
    "ts-loader": "0.8.2", 
    "typescript": "1.8.10", 
    "typings": "1.0.4", 
    "webpack": "^2.1.0-beta.15", 
    "webpack-dev-server": "^2.1.0-beta", 
    } 
} 

webpack.config.js

var webpack = require('webpack'); 

var PROD = JSON.parse(process.env.PROD_ENV || '0'); 

module.exports = { 
    entry: './app/main.ts', 
    output: { 
     path: './dist', 
     filename: 'app.bundle.js' 
    }, 
    module: { 
     loaders: [ 
     { test: /\.json$/, loader: 'json', include: [/node_modules/] }, 
     { test: /\.ts$/, loader: 'ts' }, 
     { test: /\.html$/, loader: 'html' }, 
     { test: /\.css$/, loader: 'style!css' }, 
     { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' } 
     ] 
    }, 
    resolve: { 
     extensions: ['', '.js', '.ts', '.css'] 
    }, 
    'htmlLoader': { 
     caseSensitive: true 
    }, 
    plugins: PROD ? [ 
     new webpack.optimize.UglifyJsPlugin({ 
      compress: { warnings: false } 
     }) 
    ] : [] 
} 

나 ':

이

내가 지금까지 무엇을 가지고 상당히 표준 import 문을 사용하여 m uch를 import {FORM_DIRECTIVES,REACTIVE_FORM_DIRECTIVES} from '@angular/forms'으로 가져오고 ( import 'rxjs/add/operator/map';) 필요한 것만 가져오고 환경 변수 PROD_ENV = 1을 사용하여 npm run build:prod으로 빌드를 실행하십시오.

어쩌면 jquery 또는 lodash와 같은 문제가 (import * as $ from 'jquery' 또는 import {orderBy} from 'lodash') 문제를 일으키고 있을지 모르지만 둘 다 비교적 작다고 생각합니다. webpack visualizer에 따르면 Jquery와 Lodash는 각각 번들 크기의 6.2 %와 12 %를 차지합니다. Angular는 번들 크기의 49 %를 사용합니다.

무엇이 누락 되었습니까? 당신이 타이프 라이터를 사용할 필요가 treeshaking를 들어

Answer 1

tsconfig.json을 지원하는 2

npm i typescript@next --save-dev

{ 
    "compilerOptions": { 
    "module": "es6", 
    "target": "es5" 
    } 
} 

ES6 모듈은 정적 분석 가능하고 웹팩 결정할 수 있기 때문이다 귀하의 의존성 중 어떤 것을 사용하고 그렇지 않은지를 결정하십시오.

Answer 2

WebShack 2 및 is still blocked과 함께 트리 흔들림이 발생하지 않았으며 문제의 핵심 팀 의견에 따라 명확한 방법이 제공되지 않았습니다. The Emperor's New Clothes을 신고 있을지 모르겠군요.

Answer 3

현재 Angular 앱을 계속 사용하는 방법은 angular-cli로 전환하는 것입니다. 그것은 webpack을 기반으로하고 이제는 나무 떨림 기능으로 전혀 지원하지 않습니다. 그냥 사용하십시오 ng build --prod