iT邦幫忙

DAY 29
1

今日目標: 使用Polymer Vulcanize 打包,了解如何使用Yeoman

使用Polymer開發Web應用,元件慣例是一個html檔案存放,方便管理。但每個元件都是一個html,只要用到三個元件,瀏覽器就需發出3次request,所以元件多、網路慢就會影響使用體驗。

舉例來說,Polymer官網的計算機App,按鍵顯示面板是元件、觸控面板也元件,每個元件都是html,載入這個計算機App,瀏覽器總共需要發出20個Request。

這些request包含了下面資源

  1. 計算機App 的html (1個)
  2. 各個元件的 html (13個)
  3. polymer底層 platform.js , polymer.js (2個)
  4. 計算機字型檔 (4個)

本機開發時網路快沒感覺,但真正運行環境使用就有可能是問題,因此Polymer官網很貼心地推出打包工具 Vulcanize 來幫忙處理這"雜事"

Vulcanize 使用介紹

安裝方式

用npm進行安裝

sudo npm install -g vulcanize

使用方式 (1)

vulcanize -o 輸出的檔名 準備要打包的檔名,如下

vulcanize -o build.html index.html

使用方式 (2)

加上 --inline 參數連JS一起打包進 html

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

使用方式 (3)

防止xss攻擊,將js檔案另外打包

vulcanize -o build.html index.html --inline --csp 3.js

使用方式 (4)

瘦身,移除程式註解、沒用的空白字元

vulcanize -o build.html index.html --inline --csp 3.js --strip

...更多使用方式與設定可參考 [Vulcanize github]

使用 Vulcanize

使用方式(1) 可以將指定html所包含用到的元件html,打包成新的html檔案 (例如1.html),request可減少到剩下 8個request

[打包程式範例] [線上範例]

使用方式(2) ,可以進一步將引用到的js也打包到html裡面,request剩下6個reqeust,剩下其他5個是載入字型所需的request

[打包程式範例] [線上範例]

不過使用方法(2) 將js也打包到html,違反CSP (Content Security Policy),

可能會造成XSS攻擊。所以可以改用 使用方式(3) 來打包js到指定的檔案。

[打包程式範例] [線上範例]

=

解決Web元件打包後,發現原來Yeoman也有提供Polymer + Vulcanize 產生器 (generator-polymer-gulp),所以接下來再搭配Yeoman就可以把整個開發流程串起來了

加碼演出~

generator-polymer-gulp 使用介紹

安裝方式

npm install generator-polymer-gulp

建立專案目錄 (針對開發一個Polymer元件)

mkdir my-polymer-component && cd $_

建立開發Polymer元件的環境

yo polymer-gulp

整個專案打掉重新建構 (clean、build)

gulp

開發完要打包成整個目錄,目錄名稱為 {{元件名稱}}_dist

npm run pre-publish

按照上面步驟就可以輕鬆完成開發一個Polymer元件,所需的開發環境,並且自動打包完成,而且工具會幫忙打包出上述使用方式(1)~(3)任君挑選,就在 專案目錄(yo) 下的 / _dist / _vulcanize 目錄下

參考文件


上一篇
Material Design - 自適應(RWD)鍵盤,有這種事?
下一篇
Polymer 30天全面解析
系列文
你不能不知道的Polymer開發實戰30

尚未有邦友留言

立即登入留言