gzip encoding javascript served by local node server with browser sync

Question

I have an angular app I am serving locally with browser sync through a gulp file.

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>

request headers: Accept-Encoding:gzip, deflate, sdch, br

response header: Content-Encoding:gzip

gzipped app.js that get's returned to browser

�ܽ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`!�

Basically it looks like I am successfully gzipping the file and serving it and it looks like the browser recieves the gzipped file and has the headers to know that it should unzip it but it lands at the browser as this bizarrely encoded text.

When I look at the code on the server locally it is just binary.

Any idea what I need to be doing here to get the browser to ungzip and load my script?

score 1 · Accepted Answer · edited May 23 '17 at 11:53

You've taken your content and compressed it with gzip. Then you've taken the gzipped content and served it using gzip encoding. This essentially applies gzip twice on the same content while the browser only understands the one used in the HTTP transport.

I would suggest removing this line from your code:

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

It seems you want to precompress your content for storage in preparation for serving with gzip transport compression. Though it seems possible, I'm not sure how you would do this in Node. This answer may help, though:

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 encoding javascript served by local node server with browser sync

1 Answers1