,

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

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

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

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

Contents

JavaScript を外部ファイル化する

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

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>pitr_Rocket_icon</title>
</head>
<body>
  <canvas id="canvas" width="120" height="121">
    表示には Canvas 対応ブラウザが必要です。
  </canvas>
  <script type="text/javascript" src="javascripts/main.js"></script>
</body>
</html>

JavaScript

  • 2994 byte main.js
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-contrib-uglify に、mangle: false, beautify: true オプションを読みやすいように付けました。

  • 2047 byte main.min.js
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 圧縮します。

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

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

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

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

Formatbyte
main.js2994 ※
main.min.js2047
main.min.js.gz665

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