web-dev-qa-db-fra.com

Angular 2: Réduire la taille de l'application (en plus du groupement/minification)

J'ai une petite taille moyenne (~ 28 Ko, y compris uniquement les modèles JS + HTML (TypeScript transpiled)) Angular 2 app.

Il est basé à l'origine sur le quickstart angular.io , mais maintenant je le regroupe/le réduit à l'aide de JSPM pour le déploiement.

Le fichier JS que je reçois est de 2,1 Mo, descendant à 449 Ko avec la compression gzip.

C'est encore assez important, et je voudrais demander quelle est la meilleure solution pour réduire la taille globale de l'application pour le déploiement, afin de livrer mon application dans le bundle le plus petit et le plus efficace.

Edit : Je dois mentionner que j'ai réduit la taille de l'ensemble non compressé mais minimisé à 1,9 Mo en important des opérateurs RxJS individuellement, par exemple. avec import 'rxjs/add/operator/map';; donc toute économie de taille que je rechercherais en plus de cela.

Merci d'avance pour votre aide.

angularrxjsproduction-environmentbundling-and-minificationjspm
9
Harry

Maintenant que Angular 2 est passé en version 2.0.0, il existe une documentation sur la compilation Ahead of Time de Angular apps (c'est-à-dire à partir de modèles TypeScript + HTML vers Javascript).

La compilation supprime le compilateur (modèle) de Angular 2, réduisant de moitié la charge utile Angular 2.

Comme mentionné par Gunter Zochbauer, l’agrégation d’arbres avec rollup est prise en charge, ce qui réduit davantage la taille du paquet.

L'arborescence est maintenant prise en charge pour le regroupement de production dans Angular CLI , avec la prise en charge de la compilation AoT également en cours de développement.

Avec un nouveau projet [email protected] sans aucune modification:

ng build --prod:

3.9K styles.b52d2076048963e7cbfd.bundle.js
183K main.8b778eea5dd35968ef66.bundle.js.gz
805K main.8b778eea5dd35968ef66.bundle.js

ng build --prod --aot:

3.9K styles.b52d2076048963e7cbfd.bundle.js
99K  main.a2eb733289ef46cb798c.bundle.js.gz
452K main.a2eb733289ef46cb798c.bundle.js

Cela signifie qu’une application de travail de base est maintenant à <100 Ko avec la compilation, la minification, la suppression d’arbres et le gzipping au format AoT.

8
Harry

J'utilise https://tools.pingdom.com pour la vérification de la taille des pages/css/scripts tels qu'ils sont reçus du serveur après un processus.

Tout d’abord, utilisez "gzip" sur le serveur, avant d’utiliser gzip => 3 Mo, après gzip 560kb

Deuxièmement, utilisez cette commande pour votre construction, "Ng build -e = prod --prod --no-sourcemap --aot"

si vous utilisez "ng build" page size => 560ko, après avoir utilisé "ng build -e = prod --prod --no-sourcemap --aot" page size => 227kb

Je travaillais sur la pile MEAN. Celles-ci ont beaucoup aidé à réduire la taille de la page J'espère que cela aide

1
Daniyal Javaid