web-dev-qa-db-ja.com

angular cli for production buildでgzip圧縮を有効にする方法

angularプロジェクトのビルド時に作成されるバンドルファイルを圧縮したいと思います。現在ng build --environment=${environment}を使用してアプリケーションをビルドしていますが、"@angular/compiler-cli": "^4.0.0"のバージョンは.gzファイルをdistフォルダーに生成しません。 .gzバンドルファイルを生成する最も簡単な方法は何ですか（webpack.config.jsファイルを変更しない方が望ましい）。 PS：.gzファイルを作成するためのオプションが、angular/cliチームによっていつか削除されたことを知っていました。しかし、私のバンドルファイルは巨大なので、私は必死にそれを必要とします。

angularcompressionangular-cligzipangular7
10
Cling

サーバーに転送する前に単純なbashスクリプトでこれを実現するか、コマンドとしてpackage.jsonに追加することもできます

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

あなたのフォルダ構造が何であるかはわかりませんが、tar -zcvf archive.tar.gz dist/prod/*必要に応じたパスが見つかるまで、ターミナルで実行します。

編集：私が質問を誤解しているようです、エンドユーザーにものを提供するときにそれがバンドルサイズについてであるならば、あなたはあなたのバンドルサイズを最小化するためにAOT + Rollupを見てみるべきです。また、ファイルを提供するときにWebサーバーでgzip圧縮を有効にします（おそらくほとんどのサーバーで既に有効になっています）。

5
Markus

Angular-CLIチームは、圧縮ファイル（.gz）の生成のサポートを削除しました。 GithubディスカッションURL 。

そのためにgulpタスクを使用できます。以下のnpmモジュールをインストールします。

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

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'));
});

.gzサポートはWebサーバーで構成できるため、サーバーは自己圧縮を実行し、そのためにいくつかのCPUサイクルを消費する必要があります。事前にビルドすると、サーバーがCPUサイクルを節約するのに役立ちます。 :)

アプリケーションの各buildの後に実行するスクリプトとしてpackage.jsonに追加できます。

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

私の理解では、ほとんどのサーバーはファイルをブラウザーに提供する前に自動的に圧縮するため、cliチームは.gz圧縮オプションを削除しました（ブラウザーが圧縮応答をサポートしている限り、ほとんどの場合）。

5
Dean Chalk

この問題を解決するより簡単な解決策を見つけました。これを試して：

npm i --save-dev gzipper

あなたのangular-cli.jsonにこれを追加するだけですgzipper --verbose ./distを次のようなビルドコマンドに追加します。

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