如何在Angular CLI中启用gzip压缩以进行生产构建

Question

如何在Angular CLI中启用gzip压缩以进行生产构建

angularcompressionangular-cligzipangular7

30

我希望在构建 angular 项目时压缩捆绑文件。目前使用 ng build --environment=${environment} 构建应用程序，版本为"@angular/compiler-cli": "^4.0.0"的状况下没有生成.gz文件到dist文件夹中。有什么最简单的方法生成 .gz 捆绑文件（最好不要修改webpack.config.js 文件）? PS：我知道创建 .gz 文件的选项已被 angular/cli 团队删除。但我非常需要它，因为我的捆绑文件太大了。

- Cling

5个回答

16

你可以在将它们传输到服务器之前使用一个简单的bash脚本来实现这一点，甚至可以将其添加到package.json作为命令

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

- Markus

2

我在服务器上继续使用gzip压缩，它完美地工作了。 - Cling

无论我已经安装了tar软件包，但是tar -zcvf archive.tar.gz dist/prod/*命令似乎失败了。 - Pankaj Parkar

这个服务器压缩真是神奇。但是为什么Angular自己不像这样提供任何压缩呢？ - muasif80

好的，下一个答案会讨论这个问题。 - muasif80

9

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

- Dean Chalk

2

有什么替代方案吗？我想在我的Angular7、Ionic 4项目中使用压缩。 - Mohammad Ayoub Khan

6

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

npm i --save-dev gzipper

在你的angular-cli.json文件中，只需添加gzipper --verbose ./dist到你的构建命令中，例如：

ng build && gzipper --verbose ./dist

- iliya.rudberg

1

@iliya.rudberg 命令 ng build --prod && gzipper --verbose ./dist 可以创建压缩文件，但是一旦部署后，仍然引用js文件。有任何想法为什么会这样？ - Uthpala Pathirana

@UthpalaPathirana您的意思是浏览器没有获取压缩文件吗？您使用哪个服务器来托管您的文件？如果是nginx，请检查此链接 - https://dev59.com/o2cs5IYBdhLWcg3wtmID - iliya.rudberg

3

这是我的首选解决方案。提示：在新版gzipper中，您需要编写ng build && gzipper compress ./dist --verbose进行压缩。 - b0lle

运行 "ng build --prod && gzipper ./dist" 后，我将所有文件上传到 Azure 静态 Web 存储，但访问网站时仍在使用未压缩的版本... 有人能指点我正确的方向吗？ - Pablo Sanchez Manzano

@iliya.rudberg 我有同样的问题。我该如何修改index.html文件来引用.gz文件？ - Jonathas Sucupira

显示剩余2条评论

0

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

- Paul Story

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Amitesh · Accepted Answer

Angular-cli团队已经移除了生成压缩文件（.gz）的支持。Github讨论链接。

我们可以使用gulp任务来实现它。安装以下npm模块：

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

创建 gulpfile.js 文件。文件名必须是 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'));
});

由于Web服务器可以配置.gz支持，但服务器必须自行进行压缩并为此消耗一些CPU周期。如果我们预先构建它，则可帮助服务器节省一些CPU周期。:)

我们可以将其添加到package.json中，作为应用程序每次build之后运行的脚本。

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