Question

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

Answer 1

Angular-cli团队已经删除了对生成压缩文件（.gz）的支持。 Github discussion 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() {
  gulp.src(['./dist/**/*.*'])
      .pipe(gzip())
      .pipe(gulp.dest('./dist'));
});

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

我们可以在package.json中添加它作为脚本，以便在每个build应用程序之后运行。

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

Answer 2

在将它们传输到服务器之前，您可以使用简单的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压缩（可能大多数服务器已经启用了它）。

Answer 3

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

Answer 4

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

npm i --save-dev gzipper

，然后在您的angular-cli.json中，只需将此gzipper --verbose ./dist添加到您的构建命令中即可，例如：

ng build && gzipper --verbose ./dist

Answer 5

我认为您需要在api上启用gzip编码。这样，客户端将向服务器请求压缩资源。

如何在角度中启用压缩

5 个答案: