web-dev-qa-db-ja.com

Webpackでツリー揺れを使用する方法？

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';）、環境変数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％を使用します。

何が欠けていますか？

angularwebpackbundle
25
Robert Smith

ツリーシェイクにはTypeScript 2を使用する必要があります

npm i TypeScript@next --save-dev

サポートする

tsconfig.json

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

これは、es6モジュールが静的に分析可能であり、Webpackが使用する依存関係と使用しない依存関係を判別できるためです。

5
evandertino

Tree ShakingはWebpack 2には同梱されておらず、コアチームのコメントによると、明確な前進方法がない まだブロックされています です。 皇帝の新しい服 を着ているのではないかと思います。

1
Josh Habdas

現在、angular-cliへの切り替えは、Angularアプリで続行する方法のようです。これは、webpackに基づいており、現在、ツリーシェーキング機能でaotをサポートしています。ng build --prodを使用するだけです。

0
vidit