JavaScript組件打包css image

JavaScript組件打包模式

js組件通常帶著css image ，但這樣使用起來可能會有些小麻煩，為了讓組件足夠的solo，有了把css image也打包在js的想法，然後順便把請求數變少，這個順便好像更重要，呵呵。

那怎樣打包呢，雖然有resource-packages這樣的方案，可是我們的核心使用者還在玩ie6這種時尚的瀏覽器呢！

我的方案：

• CSS：CSS可以當成字串存在js裡，並由js動態加到頁面上，頁面用的可能不適合，但組件通常不會影響。
• image：CSS裡用的圖片用dataURI（RFC 2397）跟MHTML（RFC 2557）的方式編到js裡面。（秦歌寫的dataURI和MHTML依然推薦給不知道是什麼東東的同學看）。CSS裡如果要絕對路徑同樣可以存js，js如果有直接用到的理論上也是可以，但js通常只改className會比較好。
• flash：一些比較小的flash，比如儲存，複製等也可以選擇打包，不過現在米解決非IE的問題，非IE使用外鏈吧

這個有個打包測試的例子。

一些細節和糾結的地方

1. 所有圖片都打包到js裡不一定合理，打包進去的應該是必用的圖片。
   那排除的圖片是再打一個包好呢還是直接用圖片？
2. 圖片可以先壓後編，我選用的圖片壓縮公用程式是pngout，而且一般是用-s5。
   有人做了些測試Uncompressed data in base64? Probably not，大家自行判斷。
3. 重複的圖片引用直接用dataURI會搞得很大很大，gzip又笨得跟豬一樣不會壓掉。
   我是選用存成js變數，淘寶的同學是用提class的方式
4. MHTML在ie7+/vista缺少結束分割符無法顯示，win03sp2缺少Content-Type會有安全提示，原因都MIME不標準，不是所有的東西都可以省。
5. 是選擇把所有的東西都打包在一個檔案還是按MHTML跟dataURI分類型打包成兩份在server按ua派檔案或由類庫智能去讀取，好像後者比較和諧。
6. swf用dataURI編入有問題，據說fp8沒問題，現在都fp10了。
   另一種solo的方案就是把js打包到swf，不過感覺不和諧

multipart/related例子

不算標準但能跑，換行也是很重要的

Content-Type:multipart/related;boundary="_BAIDU_YOUA_BB_YEP"

--_BAIDU_YOUA_BB_YEP
Content-Type:image/png
Content-Location:logo.png
Content-Transfer-Encoding:base64

...base64...

--_BAIDU_YOUA_BB_YEP
Content-Type:image/png
Content-Location:nono.png
Content-Transfer-Encoding:base64

...base64...

--_BAIDU_YOUA_BB_YEP--

btw:上篇文章的評論裡發現了這個打包的站，輸出介面很帥