通常、JSコンポーネントにはCSS画像が付属しますが、このように使用するのは少し面倒かもしれないので、コンポーネントを十分にソロにするために、CSS画像をJSでパッケージ化することを思いつきました。ちなみに、リクエストの数を減らすことの方が重要のようです。
では、どのようにパッケージ化すればよいのでしょうか? resource-packagesのようなソリューションはありますが、コア ユーザーは依然として ie6 などの流行のブラウザを使用しています。
私の解決策:
- CSS : CSS は文字列として js に保存でき、js によってページに動的に追加できます。ページは使用に適していない可能性がありますが、通常、コンポーネントは影響を受けません。
- image : CSS で使用される画像は、dataURI ( RFC 2397 ) と MHTML ( RFC 2557 ) を使用して js にコンパイルされます。 (Qin Ge によって作成されたdataURI と MHTML は、それが何であるかを知らない学生に今でも推奨されています)。 CSS で絶対パスが必要な場合は、js を保存することもできます。js を直接使用する場合は理論的には可能ですが、通常は js の className を変更する方が良いでしょう。
- flash : ストレージ、コピーなどの比較的小さなフラッシュもパッケージ化できます。ただし、IE 以外の場合は、外部リンクを使用することで問題を解決できます。
梱包テストの一例をご紹介します。
いくつかの詳細と複雑さ
- すべての画像を js にパッケージ化することは、必ずしも合理的ではありません。パッケージ化されるのは、使用する必要がある画像である必要があります。
それでは、除外された画像を別のパッケージに詰め込むのが良いでしょうか、それとも画像を直接使用するのが良いでしょうか? - 画像は最初に圧縮してから編集できます。私が選択した画像圧縮ツールはpngoutで、通常は
-s5使用します。
誰かがBase64 で非圧縮データをテストしたことがありますか? おそらくそうではありません。誰もが自分で判断できます。 - dataURI を直接使用すると、繰り返し画像参照が非常に大きくなり、gzip は豚のように愚かなので圧縮しません。
私はそれを js 変数として保存することを選択しますが、タオバオのクラスメートはクラス メソッドを使用します。 - MHTML は終了区切り文字がないため、ie7+/vista で表示できません。Win03sp2 には
Content-Typeがないため、セキュリティ プロンプトが表示されます。その理由は、MIME が標準ではないため、すべてを省略できるわけではありません。 - すべてを 1 つのファイルにパッケージ化するか、MHTML と dataURI タイプに従って 2 つのファイルにパッケージ化し、サーバー上の ua に従ってファイルを送信するか、クラス ライブラリによってインテリジェントに読み取るかを選択する必要がありますか? 後者のほうが調和がとれているようです。
- swfのコンパイルにdataURIを使用すると問題がある fp8では問題ないと言われていましたが、現在はfp10です。
もう 1 つの単独の解決策は、js を swf にパッケージ化することですが、不調和に感じられます。
マルチパート/関連する例
標準ではありませんが、改行も非常に重要です。
コンテンツ タイプ:マルチパート/関連;境界="_BAIDU_YOUA_BB_YEP"
--_BAIDU_YOUA_BB_YEP
コンテンツタイプ:画像/png
コンテンツの場所:logo.png
コンテンツ転送エンコーディング:base64
...base64...
--_BAIDU_YOUA_BB_YEP
コンテンツタイプ:画像/png
コンテンツの場所:nono.png
コンテンツ転送エンコーディング:base64
...base64...
--_BAIDU_YOUA_BB_YEP--
