Express

Expressでgzipファイルを送信する(Rewrite)

More than 1 year has passed since last update.


前提

・記載例の対象はjsファイルのみ

・gzipファイルはあらかじめ用意しておく


1. gzipファイルを用意する

ここのやり方は任意です。

参考程度ですが、

・gulpを使う場合 -> gulp-gzip

・webpackを使う場合 -> compression-webpack-plugin

というライブラリを使うと簡単にできました。

gulp-gzip


gulpfile.babel.js

gulp.task('gzip:js', () => {

return gulp.src(`<inputのパス>/+(foo|bar|baz)*.js`)
.pipe(gzip())
.pipe(gulp.dest(<outputのパス>);
});

compression-webpack-plugin


webpack.config.babel.js

new CompressionPlugin({

asset: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$/,
threshold: 10240,
minRatio: 0.8
})


2. Expressでリクエストをハンドリングする


app.js

// jsファイルのリクエストをハンドリング

app.get(/(foo|bar|baz).*\.(js)$/, (req, res, next) => {
req.url = `${req.url}.gz`;
res.set('Content-Encoding', 'gzip');
next();
});

ハンドリング自体はこれでできるのですが、

このままだと、


MIME タイプの不一致により “foo.js” からのリソースがブロックされました (X-Content-Type-Options: nosniff)。


というエラーになってしまいます(上記はFirefoxのコンソール)。

'Content-Type'が'application/octet-stream'になっているので、

明示的に'application/javascript'を指定してあげると上記のエラーは出なくなります。


app.js

app.get(/(foo|bar|baz).*\.(js)$/, (req, res, next) => {

req.url = `${req.url}.gz`;
res.set('Content-Type', 'application/javascript'); <- この行を追加
res.set('Content-Encoding', 'gzip');
next();
});


3. 動作確認

throttlingをRegular 4Gにした場合だと、手元ではこのくらい変わりました。

圧縮前

before.png

圧縮後

after.png