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リクエストを減らすことが出来るけど、それって元も子もない気がしてやっていません。

Web Components