2017-05-10 11 views
1

Ich verwende Webpack und habe von Angular 2 nach Angular 4 erfolgreich umgestellt. Allerdings sehe ich nicht die erwarteten 60% Dateigrößenreduzierungen, weder meine kompilierten vendors.js noch app.js.Von Angular 2 zu Angular 4 - Dateigrößenreduzierung und Geschwindigkeitssteigerung

vendor.js vor: 913KB jetzt: 975kb

app.js vor: 308KB jetzt: 307KB

Was bin ich? Müssen wir Angular CLI verwenden, um die Dateigrößenreduzierung zu nutzen?

mein package.json:

"dependencies": { 
    "@angular/common": "~4.0.1", 
    "@angular/compiler": "~4.0.1", 
    "@angular/core": "~4.0.1", 
    "@angular/forms": "~4.0.1", 
    "@angular/http": "~4.0.1", 
    "@angular/platform-browser": "~4.0.1", 
    "@angular/platform-browser-dynamic": "~4.0.1", 
    "@angular/router": "~4.0.1", 
    "core-js": "^2.4.1", 
    "rxjs": "5.0.1", 
    "zone.js": "^0.8.4" 
    }, 
    "devDependencies": { 
    "@types/node": "^6.0.45", 
    "angular2-template-loader": "^0.6.0", 
    "awesome-typescript-loader": "^3.0.4", 
    "copy-webpack-plugin": "^4.0.0", 
    "css-loader": "^0.25.0", 
    "css-to-string-loader": "^0.1.2", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "file-loader": "^0.8.5", 
    "html-loader": "^0.4.3", 
    "html-webpack-plugin": "^2.15.0", 
    "ng2-facebook-sdk": "^1.1.0", 
    "null-loader": "^0.1.1", 
    "raw-loader": "^0.5.1", 
    "resolve-url": "^0.2.1", 
    "rimraf": "^2.5.2", 
    "style-loader": "^0.13.1", 
    "to-string-loader": "^1.1.5", 
    "typescript": "~2.1.6", 
    "webpack": "^1.13.0", 
    "webpack-dev-server": "^1.14.1", 
    "webpack-merge": "^0.14.0" 
    } 
} 
+3

Sie müssen AoT verwenden, ES2015-Module und aktuellen Webpack den Unterschied zu fühlen (und es ist sehr unwahrscheinlich, dass es 60% oder etwas sein wird). Der Hinweis auf * Anbieter * ist sinnlos, da nicht klar ist, wie viel * Sie * erwarten. So sind Dateigrößen. Sie müssen verkleinerte, gezippte Dateien vergleichen. – estus

+0

Hören Sie aufmerksamer auf die Kommentare in diesen Konferenzgesprächen. Sie sprechen von aggressiverem Baumschütteln und -minimierung und erwähnen häufig "Verschluss" als dem cli-gebündelten Webpack. Auch ** alle ** Erwähnung ist von viel größeren Projekten als Sie hier beziehen. Es handelt sich also hauptsächlich um "Maßstab" und teilweise um verschiedene Werkzeuge. –

Antwort

0

Basierend auf Estus Kommentar (und danke). Wir müssen AoT (Ahead of Time Compilation) verwenden, nicht das übliche JiT (Just in Time Compilation), um die Größenreduzierung von Angular 4 und die Geschwindigkeitssteigerung zu nutzen. Verwenden von AoT mit Angular Cli mit AoT für Client-Browser erstellen (Plattform-Browser).

Siehe Angular ahead-of-time compilation cookbook

Es ist nicht mit fliessendem Angular auf dem Server für Suchmaschinen Indizierung und SEO Vorteile mit Universal (einem anderen Form von AoT mit Plattform-Server) verwechselt werden.

Angular Universal Doc