ExtJSライブラリの読み込みを2つのリクエストに最適化する

ExtJSライブラリを使用して開発された管理パネルの読み込みを最適化するために使用するソリューションを共有したいと思います。 このソリューションはExtJSに直接適用できるだけでなく、このライブラリにとっても非常に重要です。 このソリューションは非常に悪く、ほとんど何もなければ、60歳と70歳のインターネットエクスプローラーオールディーズのファミリーで動作することを事前に警告します。

問題：

extjs開発に着手する前に、ほとんどの開発者と顧客をすぐに怖がらせるほとんど最初のことは、「いまいましい、ほぼ1メガバイトのjavascript！？！」です。 実際、そのとおりであり、ダウンロードのリストにcssスタイルと画像を含めると、1つ半か2つすべてを取得できます。 これはextjsの利点であるため、プラグインで料理を味付けします。これは強力なプラグインであり、多くのスクリプトが前菜に添付され、それぞれがサーバーリクエストを必要とします。



その結果、管理ページにアクセスするたびに、クライアント（無料のロザリオを取得）がすべてのスクリプトとスクリプトとデザインをダウンロードする必要があります。 これは、ブラウザのページの速度に大きく影響します。 そして、ユーザーは追加の忍耐を必要としますが、それは開発者のカルマに利点を追加しません。



ExtJSに存在する「オンデマンド」でスクリプトをダウンロードする方法を説明すると思ったら、いいえ。 私の決定は失礼ですが、特定の制限を課していますが、一度にすべてを与えてくれます。

だから...

解決策：

1.複数のファイルを1つに結合します。

完全な作業に必要なファイルのリストを作成し、ライブラリ、プラグイン、ヘルパーのファイルを1つの大きなjavascriptファイルに結合します。 スタイルについても同じことを行い、スタイルから1つのファイルを作成します。 これにより、クライアントからサーバーへのリクエストの数は減りますが、十分ではありません。



開発者向けのキットには、既製のオールインワンファイルが既に含まれていますが、多くの場合、ベースライブラリに変更があります。ほとんどの場合、これらはスタイルであり、フォント、写真を変更します。 また、JavaScriptコードの上に変更がある場合は、それらをExtJSのプラグインとして記述することをお勧めします。

2.スタイルシートに画像を挿入します。

データSRC URI（ http://en.wikipedia.org/wiki/Data_URI_scheme ）を使用すると、画像のコンテンツをスタイルシートに直接挿入できます。 これは、6/7のInternet Explorerを除くほとんどすべてのブラウザーでうまく機能し、8 Explorerにはデータサイズの制限があります。 私は幸運だった、私は他のみんなとは違う、私のクライアントはIEで得点した。 この決定の利点は、クライアントが一度にすべてのスタイル画像を受け取り、レンダリング処理中にビジュアルコンポーネントの1つまたは他の部分が徐々にデザインで「塗りつぶされる」ことを観察しないことです。 また、サーバーへの追加リクエストもありません。



これはcssのデータuriの外観です（wikiから取得）。

ul.checklist > li.complete { margin-left: 20px; background:

url('data:image/png;base64,

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/

//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U

g9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC')

top left no-repeat; }









また、holivarが cssスプライトを置き換えることも良いトピックです。オールインワンであるという意味では、同時にスプライトの色（gifの場合）または背景として繰り返しスタイルの画像の使用に制限はありません。 たとえば、ExtJS（2.0）では、チェックボックスの画像はスプライトであり、チェックボックスのすべての状態が含まれています。 見出しにチェックボックスがあり、見出しに碑文があるグリッドのチェックボックスで列を作成しようとすると、スプライトはその碑文に沿って背景を塗りつぶしてその真の性質を示します。 スプライトの画像をコンポーネントに分割すると、この問題はなくなりました。

3.圧縮。

結果のファイルを圧縮する必要があります。 このために、私は個人的にyuicompressorを使用します 。 他の圧縮プログラムを使用できます。



yuicompressorの使用例



java -jar yuicompressor.jar --type js extjs.js

java -jar yuicompressor.jar --type css extjs.css









この圧縮は適切ですが、十分ではありません。 圧倒的な効果は、mod_deflateを使用したApacheによって提供されます。



私の結果は次のようなものです：

貼り付け後：js-1000kb、css-1000kb（はい、はい、base64の多くの写真）。

圧縮後：js-800kb、css-700kb。

mod_deflateの後、これはクライアントがダウンロードするものです：js-170kb、css-200kb。



ご覧のとおり、ファイルサイズはまだ大きいですが、クライアントは2つのリクエストですべてのextjs環境を受信するという確信があります。1つはjavascript用、もう1つはスタイル用です。

4.キャッシュと有効期限。

ソリューションは最も簡単で、これらの2つのファイルに対してapache mod_expiresを構成します。これにより、クライアントは一度ダウンロードした後、再度ダウンロードされず、ダウンロード用の500kbのサイズはそれほど目立ちません。 そして、強制的な無効化のために、ファイル名にタイムスタンプ（ext.1249090480.jsタイプ）を使用します。 新しい展開では、ファイル番号が変更されるだけで、クライアントは次回管理パネルにアクセスしたときに新しいバージョンをダウンロードします。



link rel="stylesheet" type="text/css" href="extjs.1245678910.css"

script type="text/javascript" src="extjs.1245678910.js"









自動化のために、ステップ1〜3を実行するスクリプトを作成しました。

ExtJSとPastebinに 投稿しました。