Ho appena aggiornato a webpack 2.1.0-beta.15 con un'app Angular 2 (versione rc.2) (con Typescript), ma mi chiedevo come utilizzare la funzione di scuotimento degli alberi. Ho letto che dovrebbe funzionare "out of the box", ma ho ancora un pacchetto di 1.7Mb per un'applicazione molto semplice, quindi probabilmente sto facendo qualcosa di sbagliato.Come usare il tree shaking in Webpack?
Questo è quello che ho finora:
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 }
})
] : []
}
I' m usando istruzioni di importazione abbastanza standard s come import {FORM_DIRECTIVES,REACTIVE_FORM_DIRECTIVES} from '@angular/forms' e cercando di importare solo ciò di cui ho bisogno (import 'rxjs/add/operator/map';) ed eseguendo la build con npm run build:prod con la variabile d'ambiente PROD_ENV = 1.
Forse qualcosa come jquery o lodash sta causando problemi (import * as $ from 'jquery' o import {orderBy} from 'lodash'), ma credo che entrambi siano relativamente piccoli. Secondo lo webpack visualizer, Jquery e Lodash rappresentano rispettivamente il 6,2% e il 12% delle dimensioni del bundle. Angular utilizza il 49% delle dimensioni del fascio.
Cosa mi manca?
Alla domanda manca la cosa più importante - come vengono utilizzati i pacchetti. Non importa se si esegue l'importazione di rxjs/add/operator/map'. Se l'app importa 'rxjs' o' rxjs/Rx' da qualche parte, viene importato l'intero RxJS. Attenersi alle versioni angolari successive perché le versioni successive sono orientate al miglioramento dell'impronta. E il 49% dice letteralmente niente. Angular è pieno di commenti. – estus
Sì, ho dimenticato di includere la versione di Angular. È rc.2. Non sono sicuro di dover fare qualcosa per evitare i commenti (come puoi vedere, c'è un plugin per l'ugacle) e sto usando il flag --optimize-minimize nel webpack. A proposito, stavo pensando che forse stavo facendo qualcosa di sbagliato, non tanto lamentandomi che Angular era pesante. –
Beh, si suppone che sia pesante, non credo che l'agitazione degli alberi possa fare qualcosa qui. Vorrei suggerire di provare RC4 e le importazioni RxJS dirette, ad es. 'import {Observable} da 'rxjs/Observable''. Per quanto riguarda Lodash, i pacchetti modulari possono aiutare https://github.com/lodash/lodash/tree/4.2.Pacchetti 1-npm – estus