Webpackでツリーシェイキングを使用するには？

Question

Angular 2（バージョンrc.2）アプリ（Typescript付き）でwebpack 2.1.0-beta.15に更新しましたが、ツリーシェイキング機能の使用方法が不思議でした。私はそれが "すぐに"機能するはずですが、私はまだ非常に単純なアプリケーションのための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文を使用しています。 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％を占めています。角度はバンドルサイズの49％を使用します。

私には何が欠けていますか？あなたはtypescriptですに使用する必要がtreeshakingについては

Answer 1

tsconfig.jsonをサポートしています2

npm i typescript@next --save-dev

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

ES6モジュールは静的に解析可能であり、WebPACKのかを判断することができますので、これがありますあなたの依存関係のうちのどれが使用されているのかとは関係ありません。

Answer 2

WebShack 2およびis still blockedでは、この問題のコアチームのコメントによると、明確な方法でツリーシェイクが行われませんでした。私はあなたがThe Emperor's New Clothesを身に着けているかもしれないと思います。

Answer 3

現在AngularアプリでAngularアプリを使用しているのは、Angle-Cliに切り替える方法です。それはwebpackに基づいており、今でもツリーシェイキング機能を備えたaotをサポートしています。ちょうど使用する ng build --prod