gzip 编码 javascript 由本地节点服务器提供，浏览器同步

Question

我有一个 angular 应用程序，我通过 gulp 文件在本地使用浏览器同步。

var argv          = require('yargs').argv;
var browserSync   = require('browser-sync').create();
var gulp          = require('gulp');
var gzip          = require('gulp-gzip');
var compression   = require("compression");

//use compression to set response gzip headers
gulp.task('serve', function () {
    browserSync.init({
        server: {
            baseDir: paths.public,
            middleware: compression()
        },
        port: port
    });
});

//gzip js and add to public
gulp.task('js', function () {
    return (source('app.js'))
    .pipe(gzip({append: false})) 
    .pipe(gulp.dest(paths.public))
});

index.html

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

请求 headers：Accept-Encoding:gzip, deflate, sdch, br

回复header：Content-Encoding:gzip

gzipped app.js 返回给浏览器

�ܽk{�F�0�y�+ �^  �Z��dvwH�\ŗD;��23{(ƃIH$@�e����SU}A7.����yޣɘ@�/��U�U����x�E�4Ϭ�Y���Z��N�V�:;{�0��%=}
+��w�$[Er�J���mY�>8�},�:8�"Y���
�ҽS�S���4�u�gɭ��(�±�Y�/�q���<�W��:���#��v��i��Zc/��ķ_�y��ՋO?����囏??��x���|��_'_y�,{����}���(�͜�'>1  ���f>e<
�Q_�Z:� �%���XU2aw[���   ��A�C�1w����'�7K��r�Ϗ���)�
�����zC���q,1Ѷ������X����NN��$\���y�,�E��J��~�&�QM�+�++���$~���|k��ӬC�gI ���>}�|�?}�^��^+V�l�D�V:���%�Ӏ�Hh5(��֑����$���rL�
X�$X&V`!�

基本上看起来我成功地压缩了文件并提供了它看起来浏览器收到了 gzip 文件，并且有 headers 知道它应该解压缩它但是它作为这个奇怪编码的文本登陆浏览器。

当我在本地查看服务器上的代码时，它只是二进制文件。

知道我需要在这里做什么才能让浏览器解压缩并加载我的脚本吗？

Answer 1

您已经获取了您的内容并使用 gzip 对其进行了压缩。然后您获取了 gzip 压缩的内容并使用 gzip 编码提供它。这实质上对相同的内容应用了两次 gzip，而浏览器只理解 HTTP 传输中使用的那个。

我建议从您的代码中删除这一行：

.pipe(gzip({append: false}))

您似乎想要预压缩您的内容以供存储，为使用 gzip 传输压缩服务做准备。虽然这似乎是可能的，但我不确定您将如何在 Node.js 中执行此操作。不过，This answer 可能会有帮助：

The connect-gzip-static module seems to do this. I haven't tested it yet.

It doesn't support dynamically decompressing assets where the client doesn't support compression, which means you need to keep an uncompressed copy of the asset on the server as well, and you have to make sure they are in sync.

gzip 编码 javascript 由本地节点服务器提供，浏览器同步

gzip encoding javascript served by local node server with browser sync

javascript

gzip

gulp

browser-sync