浏览器未读取压缩文件 - MEAN 应用程序

Question

我有一个压缩我的 js 的 gulpfile:

gulp.task('angular', function() {
  return gulp.src(['public/app/*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(ngAnnotate())
    .pipe(concat('app.js'))
    .pipe(uglify())
    .pipe(gzip({ append: true}))            // Relevant line here
    .pipe(gulp.dest('public/app/dist'));
});

在我的 index.html 文件中：

  <script src="app/dist/app.js.gz"></script>

当我注释掉执行 gzip 压缩的行时，我没有遇到任何问题。但是，包含它后，Angular 在 Chrome 控制台中输出一条消息：

Uncaught SyntaxError: Unexpected token ILLEGAL

gzip 文件中的字符看起来像是菱形，所以可能它没有正确 gzip 并且浏览器没有读取这些字符。

还有一个问题是，您可以使用 express 4.0 进行压缩。我已将其添加到我的服务器文件中：

var compress = require('compression');

...

app.use(compress());                       // Relevant line here
app.use(bodyParser.json({limit: '1mb'}));
app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));
app.use(bodyParser.json());

app.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization');
    next();
});

我不知道这是否在正确的位置以及这是否是允许浏览器读取 .gz 文件的代码行。

Answer 1

您不需要在 gulp 和 Express 中都进行 gzip -

app.use(compress());

足以满足您的静态资产需求。

（没有解释您的确切错误，但听起来好像浏览器正在接收双压缩文件，因此无法读取压缩输出）

浏览器未读取压缩文件 - MEAN 应用程序

Browser isn't reading gzipped file - MEAN app

angularjs

express

mean

gzip