如何在 Webpack 中使用摇树？答案

【问题标题】：How to use tree shaking in Webpack?如何在 Webpack 中使用摇树？
【发布时间】：2016-11-12 01:05:31
【问题描述】：

我刚刚使用 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 {FORM_DIRECTIVES,REACTIVE_FORM_DIRECTIVES} from '@angular/forms'，并尝试仅导入我需要的内容 (import 'rxjs/add/operator/map';)，并使用 npm run build:prod 和环境变量 PROD_ENV=1 运行构建。

也许像 jquery 或 lodash 这样的东西会导致问题（import * as $ from 'jquery' 或 import {orderBy} from 'lodash'），但我相信两者都相对较小。根据webpack visualizer，Jquery 和 Lodash 分别占 bundle 大小的 6.2% 和 12%。 Angular 使用了 49% 的包大小。

我错过了什么？

【问题讨论】：

这个问题缺少最重要的东西——如何使用包。如果你做import 'rxjs/add/operator/map 没关系。如果应用在某处导入了rxjs 或rxjs/Rx，则整个RxJS 都会被导入。坚持使用更高的 Angular 版本，因为更高的版本是面向改进的。 49% 的人几乎什么都没说。 Angular 中有大量的 cmets。
是的，我忘了包含 Angular 的版本。它是 rc.2。不确定我是否需要做一些事情来避免 cmets（如您所见，有一个 uglifier 插件）并且我在 webpack 中使用了 --optimize-minimize 标志。顺便说一句，我在想也许我做错了什么，而不是抱怨 Angular 很重。
嗯，应该很重，我不认为摇树可以在这里做点什么。我建议尝试 RC4 并定向 RxJS 导入，例如import {Observable} from 'rxjs/Observable'。至于 Lodash，模块化包可能会有所帮助github.com/lodash/lodash/tree/4.2.1-npm-packages
谢谢。经过一些初步的努力，我更新到 RC4。我相信我正在使用这种导入，但在地图运算符的情况下，我仍在使用import 'rxjs/add/operator/map。我希望没关系。不幸的是，我没有看到任何改进。大部分大小位于核心和编译器中（分别为 12% 和 19%），但这可能是正常的。
是的，没关系，只要留意'rxjs' 和'rxjs/Rx' 的大量进口。是的，我很确定目前无能为力。希望这将在 2.0 版本中得到改进。无论如何，A2 的“真实”数字通常以 min+gzip 的形式给出。至少它们对眼睛的压力要小得多，并显示 x10 减少。顺便说一句，here's a nice article 总结了这一点。

标签： angular webpack bundle

【解决方案1】：

对于 treeshaking，您必须使用 typescript 2

npm i typescript@next --save-dev

支持

tsconfig.json

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

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

【讨论】：

谢谢。我试过你的建议，但我发现现在它抱怨Cannot find module '@angular/core'.。可能是什么原因？正在使用的导入看起来像这样：import {Component, ViewChild} from '@angular/core';
我使用"moduleResolution": "node" 修复了错误，但是在构建之后，我没有看到 app.bundle.js 的大小有任何改进
同样的观察，使用 typescript 2.0.0 + 模块：es6 导致 app.js 大 20kb 和相同的 vendor.js 大小（在那里有反射元数据、es6-shim 和 zone.js）。最终得到：vendor.js.gz 117KB，app.js.gz 159KB。不错，但还可以更好。
很遗憾，这行不通。用这个项目尝试过：github.com/blacksonic/typescript-webpack-tree-shaking 生成的包仍然包含未使用的类 V6Engine。

【解决方案2】：

根据 Core 团队 cmets 在问题中的说法，Tree Shaking 没有随 Webpack 2 和 is still blocked 一起提供，没有明确的前进方向。恐怕你穿着The Emperor's New Clothes。

【讨论】：

【解决方案3】：

切换到 angular-cli 目前似乎是继续使用 Angular 应用程序的方式。它基于 webpack，现在甚至支持带有摇树功能的 aot。只需使用 ng build --prod

【讨论】：