Webpack'te ağaç titremesi nasıl kullanılır?

Question

Sadece (typescript ile) Açısal 2 (sürüm rc.2) uygulaması ile webpack 2.1.0-beta.15 güncellendi ama ağaç sallama özelliğinin nasıl kullanılacağını merak ediyorum. Okumak "kutunun dışında" çalışması gerekir, ama hala çok basit bir uygulama için 1.7Mb bir demet sahip, bu yüzden muhtemelen yanlış bir şey yapıyorum.

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 } 
     }) 
    ] : [] 
} 

Ben:

Bu

Bugüne kadar ne var oldukça standart ithalat ifadeleri kullanarak m uch import {FORM_DIRECTIVES,REACTIVE_FORM_DIRECTIVES} from '@angular/forms' olarak ve ben ( import 'rxjs/add/operator/map';) gerekenleri sadece içe çalışıyor ve çevre değişkeni PROD_ENV = 1 ile npm run build:prod ile yapısı çalıştırmayı.

Belki de jquery veya lodash gibi sorunlara neden oluyor (import * as $ from 'jquery' veya import {orderBy} from 'lodash'), ancak her ikisinin de nispeten küçük olduğuna inanıyorum. webpack visualizer göre, JQuery ve Lodash sırasıyla% 6.2 ve paket boyutu% 12 oluşturmaktadır. Açısal, paket boyutunun% 49'unu kullanır.

Neyi eksik? Eğer typescript kullanmak zorunda treeshaking için

Answer 1

tsconfig.json destekler 2

npm i typescript@next --save-dev

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

ES6 modülleri statik analiz ve WebPack belirleyebilir Bunun nedeni hangi Bağımlılıklarınız kullanılır ve değildir.

Answer 2

Ağaç sayısında Çekirdek ekip yorumlara göre ileri net bir şekilde olmadan WebPack 2 ve is still blocked ile birlikte verilmez Çalkalama. Korkarım ki The Emperor's New Clothes'u giyiyor olabilirsiniz. açısal-cli geçiş

Answer 3

anda Eğik uygulamalar ile gitmek yol olarak görünmektedir. Onun webpack dayalı ve şimdi bile ağaç sallayarak yetenekleri ile destekliyor. paketler nasıl kullanıldığını - Sadece ng build --prod