Edited at

Polymer: リリース前にやるべきこと。Elementsを1つのファイルにまとめる

More than 3 years have passed since last update.


Polymer0.5でVulcanize(硬化)する方法


Polymerは複数のElement(Web Components)を組み合わせて、作っていきます。そのため、ブラウザからリクエストが来た時に、複数のHTMLファイルが通信でやりとりされコストが大きいです。


Vulcanizeツールは、複数のElementを1つのファイルにまとめることで、通信のオーバーヘッドを減らそうという試みです。

Vulcanizeツールには、全部(HTML、JS、Element、Element内のJS)まとめるパターンと、

Elementのみまとめ、JSは別ファイルに別途まとめるパターン(Content Security Policy)があります。

Vulcanizeの説明は以下が詳しいです。

  https://www.polymer-project.org/0.5/articles/concatenating-web-components.html

VulcanizeツールのGitHubはこちら(ここにも使い方が載ってます。)

  https://github.com/Polymer/vulcanize/tree/polymer-0.5


使い方


Vulcanizeのインストール


バージョン指定をしてインストールします。バージョン指定しないと1.0系用のVulcanizeが落ちてきてしまいます。

Windows環境だとうまく落とせなかったので、Fedora19上で以下を実行しました。

sudo npm install -g vulcanize@0.7.11


使い方



CSPモード

   Extract inline scripts to a separate file

vulcanize -o build.html --verbose --csp --strip index.html


オプション


  • --output, -o


    • Output file name (defaults to vulcanized.html)



  • --verbose, -v


    • More verbose logging



  • --help, -v, -?


    • Print this message




  • --config


    • Read a given config file




  • --strip, -s


    • Remove comments and empty text nodes



  • --csp


    • Extract inline scripts to a separate file (uses <output file name>.js)



  • --inline


    • The opposite of CSP mode, inline all assets (script and css) into the document




  • --inline --csp


    • Bundle all javascript (inline and external) into <output file name>.js




  • --abspath, -p


    • Specify site root. Resolve paths to absolute paths based on site root




  • --no-strip-excludes


    • Keep imports excluded from inlining




  • --version, -V


    • print version information




出力結果は

  build.html と build.js の2つ



inlineモード(JSもHTMLもまとめて1ファイルにする)

   The opposite of CSP mode, inline all assets (script and css) into the document

こっちは私の環境ではうまくいきませんでした。

vulcanize -o build.html --verbose --inline --strip index.html


出力結果は

  build.htmlのみ