grunt-contrib-compress（とnginx）でトラフィックを軽くしよう

gruntを使っていると、公開用ファイルの生成からアップロードまでを自動化できるので、gzipを使った圧縮ファイルを作成しておくと通信量を減らすことができて地球（場合によってはお財布にも）に優しいでございます。

ngx_http_gzip_static_module

私はVPSにはapacheを入れていないので、こちらの情報はnginx向けになります。

色々ありますが、決め手はコレですよ。

1

gzip_static on;

yumで入れたnginxは、ちゃんとコレが効くようになっています。（たぶん）

nginxの方は大したことはないのです。

問題はgruntの方です。

細かい設定はよくわかってない

1

npm install -g grunt-contrib-compress

少々長いですが、js,css,htmlのファイルに関しては、この設定で全てgzipで圧縮して同じディレクトリに配置してくれます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


compress: {
    all: {
        options: {
            mode: 'gzip',
            level: 9
        },
        files: [{
            expand: true,
            cwd: '<%= config.dist %>',
            dest: '<%= config.dist %>',
            src: ['**/*.js'],
            ext: '.js.gz',
            extDot: 'last'
        },{
            expand: true,
            cwd: '<%= config.dist %>',
            dest: '<%= config.dist %>',
            src: ['**/*.css'],
            ext: '.css.gz',
            extDot: 'last'
        },{
            expand: true,
            cwd: '<%= config.dist %>',
            dest: '<%= config.dist %>',
            src: ['**/*.html'],
            ext: '.html.gz',
            extDot: 'last'
        }]
    }
},

srcとextのあたりはもう少し工夫できればもっと短く書けると思うのですが…。

今の私にはコレが精一杯。

で、サーバに送信する時に圧縮してあれば良いので、deploy用のタスクの中に追加しておきました。

1
2
3
4
5


grunt.registerTask('deploy', [
    'build',
    'compress:all',
    'rsync:prod'
]);

rsyncについてはこちらにも書いてあるのでよろしければご確認ください。

Yeoman（yo + grunt + bower）を始めてみてわかったこと | IT Office Nishimiyahara

転送量激減

minimizeしたテキストファイルから、さらに3分の1程度のサイズになるので、かなりの効果ですよ。

効果の大きかったのはやはり大きめのファイルで、通常だと323KBのjsファイル（jQueryと諸々）がuglifyで122KBになって、gzipで40KBになりました。

開発時に使っているファイルから考えると約8分の1のサイズですよ。

8回アクセスがあっても、圧縮前の1回と同じ量しか回線を使いません。

キャッシュも考えると物凄い量の節約です。

手間もそれほどかかりませんよ。

gruntさまさまですね。