JS components usually come with css image, but it may be a little troublesome to use it this way. In order to make the component solo enough, I came up with the idea of packaging the css image in js, and then reducing the number of requests by the way. This seems to be more important. ,hehe.
So how to package? Although there are solutions like resource-packages , our core users are still using fashionable browsers like ie6!
My solution:
- CSS : CSS can be stored in js as a string and dynamically added to the page by js. The page may not be suitable for use, but the component usually will not be affected.
- image : The images used in CSS are compiled into js using dataURI ( RFC 2397 ) and MHTML ( RFC 2557 ). ( dataURI and MHTML written by Qin Ge are still recommended to students who don’t know what they are). If you want an absolute path in CSS, you can also save js. If js is directly used, it is theoretically possible, but it is usually better to just change the className of js.
- flash : Some relatively small flashes, such as storage, copying, etc., can also be packaged. However, now we can solve the problem of non-IE. For non-IE, use external links.
Here is an example of packaging testing .
Some details and tangles
- It is not necessarily reasonable to package all images into js. What is packaged should be the images that must be used.
So is it better to pack the excluded pictures into another package or use the pictures directly? - Images can be compressed first and then edited. The image compression tool I choose is pngout , and I usually use
-s5 .
Someone has done some tests. Uncompressed data in base64? Probably not , everyone can make their own judgment. - Repeated image references will be very large if you use dataURI directly, and gzip is as stupid as a pig and will not compress it.
I choose to save it as a js variable, while my classmates on Taobao use the class method. - MHTML cannot be displayed in ie7+/vista due to lack of end delimiter. Win03sp2 lacks
Content-Type and will cause security prompts. The reason is that MIME is not standard and not everything can be omitted. - Should I choose to package everything in one file or package it into two files according to MHTML and dataURI types and send the file according to ua on the server or read it intelligently by the class library? It seems that the latter is more harmonious.
- There is a problem with using dataURI to compile swf. It is said that there is no problem with fp8, but now it is fp10.
Another solo solution is to package js into swf, but it feels disharmonious.
multipart/related example
It’s not standard but it can run. Line breaks are also very important.
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--
