Angular 如何在网页中使用摇树？

我刚刚用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"
  ]
}

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

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

我正在使用相当标准的导入语句，例如从“@angular/forms”导入{FORM_指令，REACTIVE_FORM_指令}，并尝试只导入我需要的内容（

import'rxjs/add/operator/map'；

），并使用环境变量prod\u ENV=1运行带有

npm run build:prod

的构建

可能是jquery或lodash之类的东西引起了问题（

import*as$from'jquery'

或

import{orderBy}from'lodash'

），但我相信两者都相对较小。根据调查，Jquery和Lodash分别占捆绑规模的6.2%和12%。Angular使用束大小的49%

---

我遗漏了什么？

对于爬树，您必须使用typescript 2

npm-itypescript@next--保存开发文件

支持

tsconfig.json

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

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

---

这是因为es6模块是静态分析的，Webpack可以确定哪些依赖项被使用，哪些不被使用。

Webpack 2没有附带Tree Shanking，根据核心团队在本期中的评论，没有明确的前进方向。恐怕您可能正在佩戴。

目前，切换到angular cli似乎是angular应用程序的发展方向。它基于webpack，现在甚至支持具有树震动功能的aot。只用

---

ng build--prod

这个问题缺少了最重要的东西—如何使用包。无论您是否执行

导入'rxjs/add/operator/map

。如果应用程序在某处导入

rxjs

或

rxjs/Rx

，则导入整个rxjs。坚持使用更高的角度版本，因为更高的版本面向封装外形的改进。49%的人什么也没说。Angular的评论太多了。是的，我忘了包括Angular的版本。它是rc.2。不确定我是否需要做些什么来避免评论（正如你所看到的，有一个更丑陋的插件），我正在使用webpack中的--optimize minimize标志。顺便说一句，我在想，也许我做错了什么，并没有太多抱怨棱角太重。嗯，它应该很重，我不认为摇树能在这里起什么作用。我建议尝试RC4和定向RxJS导入，例如从“RxJS/Observable”导入{Observable}。至于Lodash，模块化软件包可能会有所帮助，谢谢。经过一些初步的努力，我更新到RC4。我相信我使用的是这种导入，但是对于map操作符，我仍然使用

import'rxjs/add/operator/map

。我希望没问题。不幸的是，我没有看到任何进步。大部分大小都位于核心和编译器中（分别为12%和19%），但这可能是正常的。是的，没关系，只需关注

'rxjs'

和

'rxjs/Rx'

大规模导入即可。是的，我很确定现在什么都做不了。希望这将在2.0版本上得到改进。无论如何，A2的“真实”数字通常表示为min+gzip。至少它们对眼睛的压力小得多，并且显示出x10减少。顺便说一句，就是这样。谢谢。我尝试了你的建议，但我发现现在它抱怨

找不到模块'@angular/core'。

。原因可能是什么？正在使用的导入看起来像这样：

import{Component，ViewChild}来自“@angular/core”

我使用

“moduleResolution”修复了错误：“node”

，但是，在构建之后，我看不到app.bundle.js的大小有任何改进相同的观察结果，使用typescript 2.0.0+模块：es6导致app.js和vendor.js的大小增加了20kb（其中包含反射元数据、es6垫片和zone.js）。结果是：vendor.js.gz 117KB，app.js.gz 159KB。很好，但可能会更好。遗憾的是，这不起作用。在这个项目中尝试过：生成的bundle仍然包含未使用的类V6Engine。