,

[Front-End General] HTML5 Canvas で表現した画像を grunt-contrib-uglify で最適化する

公開日: 2013/12/17
更新日: 2019/09/19

外部JS化の後、minify してみます。

[markdown]
HTML5 Canvas 画像は、こちらで作成したものを利用します。

> * [Ai->Canvas: ai ファイルを HTML5 Canvas へ変換する | deadwood](https://www.d-wood.com/blog/2013/12/17_5129.html)

## JavaScript を外部ファイル化する

こちらをもとに HTML と JavaScript に切り離してみます。

> * [HTML5 Canvas入門 (全17回) – プログラミングならドットインストール](http://dotinstall.com/lessons/basic_canvas)

### HTML

“`html




pitr_Rocket_icon



表示には Canvas 対応ブラウザが必要です。




“`

### JavaScript

* 2994 byte main.js

“`javascript
window.onload = function() {
init();
}
function init() {
var canvas = document.getElementById(“canvas”);
if (!canvas || !canvas.getContext) return false;
var ctx = canvas.getContext(“2d”);
rocket(ctx);
}
function rocket(ctx) {
// rocket/defs
ctx.save();
// rocket/defs/perspective4876
ctx.save();
// rocket/defs/perspective4876/
ctx.save();
// rocket/base
ctx.restore();
ctx.restore();
// rocket/base/
ctx.save();
// rocket/layer1
ctx.restore();
// rocket/layer1/path3297
ctx.save();
ctx.beginPath();
ctx.moveTo(22.8, 76.1);
ctx.lineTo(46.1, 98.7);
ctx.bezierCurveTo(76.0, 73.6, 114.1, 51.7, 116.2, 3.0);
ctx.bezierCurveTo(67.5, 6.6, 45.9, 44.8, 22.8, 76.1);
ctx.closePath();
ctx.fillStyle = “rgb(255, 255, 0)”;
ctx.fill();
ctx.lineWidth = 6.0;
ctx.lineJoin = “round”;
ctx.stroke();
// rocket/layer1/path3301
ctx.beginPath();
ctx.moveTo(101.3, 28.1);
ctx.bezierCurveTo(98.6, 31.0, 94.0, 31.1, 91.2, 28.3);
ctx.bezierCurveTo(88.3, 25.6, 88.3, 21.0, 91.1, 18.2);
ctx.bezierCurveTo(91.1, 18.2, 91.1, 18.2, 91.1, 18.2);
ctx.bezierCurveTo(93.8, 15.3, 98.4, 15.2, 101.2, 17.9);
ctx.bezierCurveTo(104.1, 20.7, 104.1, 25.2, 101.3, 28.1);
ctx.bezierCurveTo(101.3, 28.1, 101.3, 28.1, 101.3, 28.1);
ctx.closePath();
ctx.fillStyle = “rgb(0, 127, 127)”;
ctx.fill();
ctx.lineWidth = 3.6;
ctx.stroke();
// rocket/layer1/path3303
ctx.beginPath();
ctx.moveTo(87.2, 42.7);
ctx.bezierCurveTo(84.4, 45.6, 79.8, 45.7, 77.0, 43.0);
ctx.bezierCurveTo(74.2, 40.2, 74.1, 35.7, 76.9, 32.8);
ctx.bezierCurveTo(76.9, 32.8, 76.9, 32.8, 76.9, 32.8);
ctx.bezierCurveTo(79.7, 29.9, 84.2, 29.8, 87.1, 32.6);
ctx.bezierCurveTo(89.9, 35.3, 89.9, 39.9, 87.2, 42.7);
ctx.bezierCurveTo(87.2, 42.7, 87.2, 42.7, 87.2, 42.7);
ctx.closePath();
ctx.fill();
ctx.stroke();
// rocket/layer1/path3305
ctx.beginPath();
ctx.moveTo(72.8, 57.6);
ctx.bezierCurveTo(70.0, 60.4, 65.5, 60.5, 62.6, 57.8);
ctx.bezierCurveTo(59.8, 55.1, 59.8, 50.5, 62.5, 47.6);
ctx.bezierCurveTo(62.5, 47.6, 62.5, 47.6, 62.5, 47.6);
ctx.bezierCurveTo(65.3, 44.8, 69.9, 44.7, 72.7, 47.4);
ctx.bezierCurveTo(75.5, 50.2, 75.6, 54.7, 72.8, 57.6);
ctx.bezierCurveTo(72.8, 57.6, 72.8, 57.6, 72.8, 57.6);
ctx.closePath();
ctx.fill();
ctx.stroke();
// rocket/layer1/path3307
ctx.beginPath();
ctx.moveTo(22.8, 76.1);
ctx.lineTo(3.0, 83.0);
ctx.bezierCurveTo(7.3, 70.3, 14.0, 53.9, 23.2, 48.3);
ctx.bezierCurveTo(29.2, 44.7, 43.5, 47.4, 43.5, 47.4);
ctx.lineTo(22.8, 76.1);
ctx.closePath();
ctx.fillStyle = “rgb(255, 0, 0)”;
ctx.fill();
ctx.lineWidth = 6.0;
ctx.stroke();
// rocket/layer1/path3309
ctx.beginPath();
ctx.moveTo(46.8, 98.0);
ctx.lineTo(40.6, 117.9);
ctx.bezierCurveTo(53.1, 113.3, 69.3, 106.0, 74.6, 96.7);
ctx.bezierCurveTo(78.0, 90.5, 74.8, 76.3, 74.8, 76.3);
ctx.lineTo(46.8, 98.0);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.restore();
}
“`

## 最適化する

下記を使って最適化します。

> * [Grunt: JavaScript ファイルの結合・難読化・圧縮をする | deadwood](https://www.d-wood.com/blog/2013/11/25_5063.html)

下記には grunt-contrib-uglify に、`mangle: false`, `beautify: true` オプションを読みやすいように付けました。

* 2047 byte main.min.js

“`javascript
function init() {
var canvas = document.getElementById(“canvas”);
if (!canvas || !canvas.getContext) return !1;
var ctx = canvas.getContext(“2d”);
rocket(ctx);
}
function rocket(ctx) {
ctx.save(), ctx.save(), ctx.save(), ctx.restore(), ctx.restore(), ctx.save(), ctx.restore(),
ctx.save(), ctx.beginPath(), ctx.moveTo(22.8, 76.1), ctx.lineTo(46.1, 98.7), ctx.bezierCurveTo(76, 73.6, 114.1, 51.7, 116.2, 3),
ctx.bezierCurveTo(67.5, 6.6, 45.9, 44.8, 22.8, 76.1), ctx.closePath(), ctx.fillStyle = “rgb(255, 255, 0)”,
ctx.fill(), ctx.lineWidth = 6, ctx.lineJoin = “round”, ctx.stroke(), ctx.beginPath(),
ctx.moveTo(101.3, 28.1), ctx.bezierCurveTo(98.6, 31, 94, 31.1, 91.2, 28.3), ctx.bezierCurveTo(88.3, 25.6, 88.3, 21, 91.1, 18.2),
ctx.bezierCurveTo(91.1, 18.2, 91.1, 18.2, 91.1, 18.2), ctx.bezierCurveTo(93.8, 15.3, 98.4, 15.2, 101.2, 17.9),
ctx.bezierCurveTo(104.1, 20.7, 104.1, 25.2, 101.3, 28.1), ctx.bezierCurveTo(101.3, 28.1, 101.3, 28.1, 101.3, 28.1),
ctx.closePath(), ctx.fillStyle = “rgb(0, 127, 127)”, ctx.fill(), ctx.lineWidth = 3.6,
ctx.stroke(), ctx.beginPath(), ctx.moveTo(87.2, 42.7), ctx.bezierCurveTo(84.4, 45.6, 79.8, 45.7, 77, 43),
ctx.bezierCurveTo(74.2, 40.2, 74.1, 35.7, 76.9, 32.8), ctx.bezierCurveTo(76.9, 32.8, 76.9, 32.8, 76.9, 32.8),
ctx.bezierCurveTo(79.7, 29.9, 84.2, 29.8, 87.1, 32.6), ctx.bezierCurveTo(89.9, 35.3, 89.9, 39.9, 87.2, 42.7),
ctx.bezierCurveTo(87.2, 42.7, 87.2, 42.7, 87.2, 42.7), ctx.closePath(), ctx.fill(),
ctx.stroke(), ctx.beginPath(), ctx.moveTo(72.8, 57.6), ctx.bezierCurveTo(70, 60.4, 65.5, 60.5, 62.6, 57.8),
ctx.bezierCurveTo(59.8, 55.1, 59.8, 50.5, 62.5, 47.6), ctx.bezierCurveTo(62.5, 47.6, 62.5, 47.6, 62.5, 47.6),
ctx.bezierCurveTo(65.3, 44.8, 69.9, 44.7, 72.7, 47.4), ctx.bezierCurveTo(75.5, 50.2, 75.6, 54.7, 72.8, 57.6),
ctx.bezierCurveTo(72.8, 57.6, 72.8, 57.6, 72.8, 57.6), ctx.closePath(), ctx.fill(),
ctx.stroke(), ctx.beginPath(), ctx.moveTo(22.8, 76.1), ctx.lineTo(3, 83), ctx.bezierCurveTo(7.3, 70.3, 14, 53.9, 23.2, 48.3),
ctx.bezierCurveTo(29.2, 44.7, 43.5, 47.4, 43.5, 47.4), ctx.lineTo(22.8, 76.1), ctx.closePath(),
ctx.fillStyle = “rgb(255, 0, 0)”, ctx.fill(), ctx.lineWidth = 6, ctx.stroke(), ctx.beginPath(),
ctx.moveTo(46.8, 98), ctx.lineTo(40.6, 117.9), ctx.bezierCurveTo(53.1, 113.3, 69.3, 106, 74.6, 96.7),
ctx.bezierCurveTo(78, 90.5, 74.8, 76.3, 74.8, 76.3), ctx.lineTo(46.8, 98), ctx.closePath(),
ctx.fill(), ctx.stroke(), ctx.restore(), ctx.restore();
}
window.onload = function() {
init();
};
“`

## gzip 圧縮する

下記を使って gzip 圧縮します。

> * [Grunt: JavaScript や CSS を gzip する | deadwood](https://www.d-wood.com/blog/2013/12/03_5071.html)

* 718(665) byte main.min.js.gz

※ Chrome Developer Tools でファイルサイズを確認したところ、実際には 665 byte でした。

## 出力されたファイルの比較サンプル

サンプル画像にリンクを張ってあります。

|Format|byte|
|:———–|————:|
|[main.js](https://www.d-wood.com/demo/20131217/pitr_Rocket_icon_org.html)| 2994 ※ |
|main.min.js| 2047 |
|[main.min.js.gz](https://www.d-wood.com/demo/20131217/pitr_Rocket_icon_min.html)| 665 |

※ サンプルは、サーバ側でgzip圧縮（803 byte）がされています。
[/markdown]