22

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

4

5 回答 5

35

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() {
  return gulp.src(['./dist/**/*.*'])
      .pipe(gzip())
      .pipe(gulp.dest('./dist'));
});

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

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

"scripts": {
       ...
       "postbuild": "gulp compress"
       ...
   }
于 2017-09-18T13:30:40.300 回答
9

您可以在将它们传输到服务器之前使用简单的 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 以最小化你的包大小。并在提供文件时在您的网络服务器上启用 gzip 压缩（可能大多数服务器已经启用它）。

于 2017-06-26T11:42:27.503 回答
7

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

于 2017-06-26T11:41:40.137 回答
5

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

npm i --save-dev gzipper

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

ng build && gzipper --verbose ./dist
于 2019-06-19T23:30:43.290 回答
0

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

于 2020-08-26T00:49:44.407 回答