如何在 Angular CLI 中为生产构建启用 gzip 压缩



我想压缩构建angular项目时创建的捆绑文件。我使用ng build --environment=${environment}当前构建应用程序,并且"@angular/compiler-cli": "^4.0.0"的版本不会生成.gz文件到dist文件夹。生成.gz捆绑文件的最简单方法是什么(最好不要接触webpack.config.js文件)? PS:我知道创建.gz文件的选项已被angular/cli团队删除。但我迫切需要它,因为我的捆绑文件很大。

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

我们可以为它使用一个吞咽任务。 安装以下 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'));
});

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

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

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

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

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

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

npm i --save-dev gzipper

在你的angular-cli.json中,只需将这个gzipper --verbose ./dist添加到你的构建命令中,就像:

ng build && gzipper --verbose ./dist

我认为您需要在 API 上启用 gzip 编码。 这样,客户端将要求服务器提供压缩资源。

最新更新