如何在角度中启用压缩

Question

我想压缩构建angular项目时创建的包文件.我ng build --environment=${environment}用来构建当前的应用程序和版本"@angular/compiler-cli": "^4.0.0"不生成.gz文件到dist文件夹.生成.gz包文件的最简单方法是什么(最好不要触摸webpack.config.js文件)？PS:我知道.gz有时创建文件的选项会被angular/cli团队删除.但我绝望地需要它,因为我的捆绑文件非常庞大.

Answer 1

Angular-cli团队已经删除了对生成压缩文件(.gz)的支持.Github讨论网址.

我们可以使用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() {
  gulp.src(['./dist/**/*.*'])
      .pipe(gzip())
      .pipe(gulp.dest('./dist'));
});

由于.gz支持可以在Web服务器中配置,但是服务器必须自行压缩并为它花费一些cpu周期.如果我们预先构建它,那么它可以帮助服务器节省一些cpu周期.:)

我们可以将它package.json作为脚本添加到每个build应用程序之后运行.

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

Answer 2

我的理解是 cli 团队删除了 .gz 压缩选项，因为大多数服务器会在将文件提供给浏览器之前自动压缩文件（只要浏览器支持压缩响应——大多数都支持）。

Answer 3

您可以使用简单的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 +汇总以最小化捆包的大小。并在提供文件时在您的Web服务器上启用gzip压缩（可能大多数服务器已将其启用）。

Answer 4

我找到了更简单的解决方案来解决这个问题。尝试这个：

npm i --save-dev gzipper

并在您的 angular-cli.json 中将其添加gzipper --verbose ./dist到您的构建命令中，例如：

ng build && gzipper --verbose ./dist