cli angular webpack bundle

angular - cli - ¿Cómo usar tree shaking en Webpack?



webpack angular 6 (3)

El cambio a angular-cli actualmente parece ser la manera de continuar con las aplicaciones angulares. Está basado en el paquete web y ahora incluso es compatible con las capacidades de agitación de los árboles. Solo usa ng build --prod

Acabo de actualizar a webpack 2.1.0-beta.15 con una aplicación Angular 2 (versión rc.2) (con Typescript), pero me preguntaba cómo usar la función de agitación de árbol. Leí que debería funcionar "de fábrica", pero todavía tengo un paquete de 1.7Mb para una aplicación muy simple, así que probablemente estoy haciendo algo mal.

Esto es lo que tengo hasta ahora:

tsconfig.json

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

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

Estoy usando sentencias de importación bastante estándar como import {FORM_DIRECTIVES,REACTIVE_FORM_DIRECTIVES} from ''@angular/forms'' e intento importar solo lo que necesito ( import ''rxjs/add/operator/map''; ) y ejecutar la compilación con npm run build:prod con la variable de entorno PROD_ENV = 1.

Tal vez algo como jquery o lodash está causando problemas ( import * as $ from ''jquery'' o import {orderBy} from ''lodash'' ), pero creo que ambos son relativamente pequeños. Según el visualizador de webpack , Jquery y Lodash representan el 6.2% y el 12% del tamaño del paquete, respectivamente. Angular usa el 49% del tamaño del paquete.

¿Qué me estoy perdiendo?

Para el borrado de árboles, debes usar el mecanografiado 2

npm i typescript@next --save-dev

que soporta

tsconfig.json

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

Esto se debe a que los módulos es6 son estadísticamente analizables y Webpack puede determinar cuáles de sus dependencias se usan y cuáles no.