Blog を Polymer で Web Conponents化しました。

普段このブログは、Markdown で記事を書いて、gulp を使って静的サイトとして出力しています。

少しずつ記事が増えてくるのに比例して、出力待ち時間と出力されるファイルの量も増えてきたので、Polymer で Web Components 化してみることにしました。

Web Components 化部分

出力されるファイルの中で冗長になっている部分を Web Components 化。

具体的にはキャプチャの赤線で囲ってある「各記事のタイトル」「各記事の内容」「カテゴリ一覧」の部分を Web Components の HTML に出力するようにしました。

予想

  • 出力待ち時間 : 激減!!
  • 出力ファイル量 : 激減!!

となるのではないかと思っていました。

結果

  • 出力待ち時間 : 微減...
  • 出力ファイル量 : 激減!!

ビルドのタスクが悪いのかもしれませんが、出力待ち時間は 1.2min から 1.1min 程度であまり変わらず。

ファイルサイズについては、212MB4MB まで減らすことが出来ました。

// before
article
  header.page-header
    include meta
    h1.entry-title
      |{{{title}}}
    // シェアボタン
    include share
  .entry-content
    |{{{content}}}
  footer
    // シェアボタン
    include share
    // ad
    include ad
    include meta
// after
block webcomponents
  link(rel="import", href="/webcomponents/{{filename}}.html")

article
  header.page-header
    #{"meta-{{filename}}"}
    #{"title-{{filename}}"}
    // シェアボタン
    include share
  #{"content-{{filename}}"}
  footer
    // シェアボタン
    include share
    // ad
    include ad
    #{"meta-{{filename}}"}

今までは各記事で include の部分が展開されて長い HTML を生成していました。

Web Components では Custom Element が挿入されて中身を共有することが出来るようになるので、ファイルサイズ削減には効果的です。

ただし、Web Components の仕組み上 iframe のように動的に import するので、大量に Web Components を設置していると、読込が遅いように感じました。

vulcanize を使えば、先に import ファイルを展開しておいてくれるので、HTTP リクエストを減らすことが出来るけど、それって元も子もない気がしてやっていません。