web-dev-qa-db-fra.com

comment activer la compression gzip dans angular cli for production build

Je voudrais compresser les fichiers de bundle créés lors de la construction du projet angular. J'utilise ng build --environment=${environment} pour construire l'application actuellement et la version de "@angular/compiler-cli": "^4.0.0" ne génère pas les fichiers .gz dans le dossier dist. Quelle est la manière la plus simple de générer .gz regrouper les fichiers (préférable sans toucher webpack.config.js fichier)? PS: je connaissais l'option pour créer le .gz les fichiers ont été supprimés par l'équipe angular/cli quelque temps en arrière. Mais j'en ai désespérément besoin car mes fichiers groupés sont énormes.

angularcompressionangular-cligzipangular7
10
Cling

Vous pouvez y parvenir avec un simple script bash avant de les transférer sur le serveur, ou même de l'ajouter à package.json en tant que commande

 "scripts": {
   "build.prod": "ng build --environment=prod && tar -zcvf archive.tar.gz dist/prod/*",

Vous ne savez pas quelle est la structure de votre dossier, mais vous pouvez jouer avec tar -zcvf archive.tar.gz dist/prod/* dans le terminal jusqu'à ce que vous trouviez des chemins adaptés à vos besoins.

EDIT: Il semble que j'ai mal compris la question, s'il s'agit de la taille du bundle lors de la diffusion du contenu à l'utilisateur final, vous devriez jeter un œil à AOT + Rollup pour minimiser la taille de votre bundle. Et activez la compression gzip sur votre serveur Web lorsque vous servez des fichiers (probablement la plupart des serveurs l'ont déjà activé).

5
Markus

L'équipe Angular-cli a supprimé le support pour la génération de fichiers compressés (.gz). RL de discussion Github .

Nous pouvons utiliser une tâche de gorgée pour cela. Installez les modules npm suivants:

$npm install --save-dev gulp
$npm install --save-dev gulp-gzip

Créez gulpfile.js

var gulp = require('gulp');
var gzip = require('gulp-gzip');

gulp.task('compress', function() {
  return gulp.src(['./dist/**/*.*'])
      .pipe(gzip())
      .pipe(gulp.dest('./dist'));
});

Puisque .gz La prise en charge peut être configurée dans les serveurs Web, mais le serveur doit le faire lui-même et coûter quelques cycles de processeur pour cela. Si nous le pré-construisons, cela aidera le serveur à économiser certains cycles de processeur. :)

Nous pouvons l'ajouter dans package.json comme script à exécuter après chaque build d'application.

"scripts": {
       ...
       "postbuild": "gulp compress"
       ...
   }
18
Amitesh

D'après ce que je comprends, l'équipe cli a supprimé l'option de compression .gz car la plupart des serveurs compressent les fichiers automatiquement avant de les servir au navigateur (tant que le navigateur prend en charge les réponses compressées - ce que la plupart font).

5
Dean Chalk

J'ai trouvé une solution plus simple pour résoudre ce problème. Essaye ça:

npm i --save-dev gzipper

et dans votre angular-cli.json ajoutez simplement ceci gzipper --verbose ./dist à votre commande de build comme:

ng build && gzipper --verbose ./dist
3
iliya.rudberg