web-dev-qa-db-fra.com

Comment utiliser l'arborescence dans Webpack?

Je viens de mettre à jour webpack 2.1.0-beta.15 avec une application Angular 2 (version rc.2) (avec TypeScript), mais je me demandais comment utiliser la fonction de tremblement de l'arbre. J'ai lu que cela devrait fonctionner "out of the box", mais j'ai toujours un paquet de 1,7 Mo pour une application très simple, donc probablement je fais quelque chose de mal.

C'est ce que j'ai jusqu'ici:

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

J'utilise des instructions d'importation relativement standard telles que import {FORM_DIRECTIVES,REACTIVE_FORM_DIRECTIVES} from '@angular/forms' et j'essaie d'importer uniquement ce dont j'ai besoin (import 'rxjs/add/operator/map';) et d'exécuter la construction avec npm run build:prod avec la variable d'environnement PROD_ENV = 1.

Quelque chose comme jquery ou lodash pose des problèmes (import * as $ from 'jquery' ou import {orderBy} from 'lodash'), mais je pense que les deux sont relativement petits. Selon le visualiseur webpack , Jquery et Lodash représentent respectivement 6,2% et 12% de la taille du paquet. Angular utilise 49% de la taille du paquet.

Qu'est-ce que je rate?

angularwebpackbundle
25
Robert Smith

Pour treehaking, vous devez utiliser TypeScript 2

npm i TypeScript@next --save-dev

qui supporte

tsconfig.json

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

En effet, les modules es6 sont analysables statiquement et Webpack peut déterminer quelles dépendances sont utilisées ou non.

5
evandertino

Tree Shaking n'a pas été livré avec Webpack 2 et est toujours bloqué sans voie à suivre claire, selon les commentaires de l'équipe principale dans le numéro. J'ai peur que vous portiez Les nouveaux vêtements de l'empereur .

1
Josh Habdas

Passer à angular-cli semble être le moyen de continuer avec les applications Angular. Il est basé sur webpack et prend même en charge, entre autres, des fonctionnalités de tremblement d’arbres. Il suffit d'utiliser ng build --prod

0
vidit