JS-Komponenten werden normalerweise mit einem CSS-Image geliefert, aber es kann etwas mühsam sein, es auf diese Weise zu verwenden. Um die Komponente alleine zu machen, kam ich auf die Idee, das CSS-Image in JS zu packen und dann Die Anzahl der Anfragen zu reduzieren scheint übrigens wichtiger zu sein.
Wie verpackt man also? Obwohl es Lösungen wie „resource-packages“ gibt, verwenden unsere Kernbenutzer immer noch modische Browser wie ie6!
Meine Lösung:
- CSS : CSS kann in js als String gespeichert und von js dynamisch zur Seite hinzugefügt werden. Die Seite ist möglicherweise nicht für die Verwendung geeignet, die Komponente wird jedoch normalerweise nicht beeinträchtigt.
- Bild : Die in CSS verwendeten Bilder werden mithilfe von dataURI ( RFC 2397 ) und MHTML ( RFC 2557 ) in js kompiliert. ( dataURI und MHTML, geschrieben von Qin Ge, werden weiterhin Studenten empfohlen, die nicht wissen, was sie sind). Wenn Sie einen absoluten Pfad in CSS wünschen, können Sie auch js speichern. Wenn js direkt verwendet wird, ist dies theoretisch möglich, aber normalerweise ist es besser, einfach den Klassennamen von js zu ändern.
- Flash : Einige relativ kleine Flash-Speicher, Kopiervorgänge usw. können ebenfalls gepackt werden. Jetzt können wir jedoch das Problem von Nicht-IE lösen und externe Links verwenden.
Hier ist ein Beispiel für eine Verpackungsprüfung .
Einige Details und Verwicklungen
- Es ist nicht unbedingt sinnvoll, alle Bilder in js zu packen. Es sollten die Bilder gepackt werden, die verwendet werden müssen.
Ist es also besser, die ausgeschlossenen Bilder in ein anderes Paket zu packen oder die Bilder direkt zu verwenden? - Bilder können zuerst komprimiert und dann bearbeitet werden. Das von mir gewählte Bildkomprimierungstool ist pngout und ich verwende normalerweise
-s5 .
Hat jemand einige Tests mit unkomprimierten Daten in base64 durchgeführt? Wahrscheinlich nicht , jeder kann sich ein eigenes Urteil bilden. - Wiederholte Bildverweise werden sehr groß, wenn Sie dataURI direkt verwenden, und gzip ist so dumm wie ein Schwein und komprimiert es nicht.
Ich entscheide mich dafür, es als js-Variable zu speichern, während meine Klassenkameraden auf Taobao die Klassenmethode verwenden. - MHTML kann in IE7+/Vista nicht angezeigt werden, da Win03sp2 keinen
Content-Type hat und Sicherheitsabfragen verursacht. Der Grund dafür ist, dass MIME nicht Standard ist und nicht alles weggelassen werden kann. - Sollte ich mich dafür entscheiden, alles in eine Datei zu packen oder es entsprechend den MHTML- und dataURI-Typen in zwei Dateien zu packen und die Datei entsprechend ua auf dem Server zu senden oder sie intelligent von der Klassenbibliothek zu lesen? Letzteres scheint harmonischer zu sein.
- Es gibt ein Problem bei der Verwendung von dataURI zum Kompilieren von SWF. Es wird gesagt, dass es mit fp8 kein Problem gibt, aber jetzt ist es fp10.
Eine andere Sololösung besteht darin, js in swf zu packen, aber es fühlt sich unharmonisch an.
mehrteiliges/verwandtes Beispiel
Es ist kein Standard, aber es kann auch sehr wichtig sein, dass Zeilenumbrüche ausgeführt werden.
Content-Type:multipart/related;boundary="_BAIDU_YOUA_BB_YEP"
--_BAIDU_YOUA_BB_YEP
Inhaltstyp:image/png
Content-Location:logo.png
Content-Transfer-Encoding:base64
...base64...
--_BAIDU_YOUA_BB_YEP
Inhaltstyp:image/png
Inhaltsort:nono.png
Content-Transfer-Encoding:base64
...base64...
--_BAIDU_YOUA_BB_YEP--
