JavaScript组件打包模式

Posted on 2010-04-05 by aoao

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:上篇文章的评论里发现了这个打包的站，输出界面很帅

This entry was posted in Web开发 and tagged , , , . Bookmark the permalink.

11 Responses to JavaScript组件打包模式

  1. tunpishuang @ 2010-04-05 at 23:33

    学习了。

    回复
  2. smoke520 @ 2010-04-06 at 12:31

    尝试下。

    回复
  3. kejun @ 2010-04-07 at 14:17

    这样打包后的文件肯定会超级大，请求数虽少了，但组件初始化的延迟将会变长，反而用户感知的性能体验会下降

    回复
    • aoao @ 2010-04-07 at 15:49

      会超级大的必然是图片导致，我也一直在纠结怎样的会适合。

      回复
      • zhenn @ 2010-04-23 at 17:25

        有利有弊，但是不妨碍我们去思考

  4. 不及格的程序员-八神 @ 2010-04-07 at 15:37

    如果是在.net环境下,js组件打包是很容易的一件事情.
    .net自定义控件可以将js以及图片打包进dll,并且将js中引用的资源url自动替换引用资源路径.

    回复
  5. Shihua @ 2010-04-19 at 23:44

    pngout -s5不太适合png8格式的文件。filter为0比较适合png8格式的文件。

    回复
  6. Redz @ 2010-04-21 at 12:22

    小弟的做法則是用前端用xml引入xsl檔
    xsl裡面包含了css以及js
    而dataURI則用xsl的變數來指定
    也是引用一個檔案解決
    感覺還蠻俐落的

    回复
  7. mashan @ 2010-04-23 at 12:37

    上周当当上买了你的书，昨天刚到货。
    还没细读，刚随便翻到关于字体的那一章。
    有提到vista的字体问题，不过随着win7的推出vista已经是昨日黄花了。没用过vista，但是超级不适应win7的宋体，跟xp下差别太大了（从win95到现在十多年已经习惯了），于是把xp的宋体覆盖了win7的字体，我相信很多win7新用户都存在这个问题。不知道对于网站建设者来说这样的问题有没有更好的解决方案，难道都是让用户去习惯新宋体吗？

    回复

  8. Pingback: Data URI&MHTML: 用还是不用？-传播、沟通、分享-一直“有你”

  9. Pingback: Data URI&MHTML: 用还是不用？ « 99css

发表评论

（必填）

（必填）