CSS.JS ファイル公開メカニズムについての考え

説明する

述べる

リソースレベル

ページのリソース レベル:

1. グローバルレベル（共通）
2. モジュールレベル
3. ページレベル (ページ)

最適化計画

最適化は主に次の側面に焦点を当てます。

1. 1つのファイルのバイトサイズを減らす
2. ファイルの数を減らします (つまり、http リクエストの数を減らします)。

その他の最適化は開発スキルに基づいており、専門知識のレベルに依存します。

ファイル出力ソリューション

1. マージ
2. 圧縮

リソース レベルと最適化計画に基づいて、次の 4 つの計画が策定されます。


1. 単一ファイルを直接引用し、順番に導入します (<link/>、<script/>)


2. 1を元に単一ファイル圧縮を行う


3. リソースレベルに従って新しい単一ファイルにマージします。


4. 3を元に、結合したファイルを圧縮する

思い

オプション 3: マージされたファイルの数を確認するにはどうすればよいですか?

キャッシュの問題

タイムスタンプサフィックスを使用する

f2econfig_json

設定ファイル:

var f2eJson={
"バージョン":"v3",//バージョン

"Update":"20091015",//タイムスタンプに従ってキャッシュを更新します

"Compress":"1",//ファイル出力スキーム (1, 2, 3, 4)

"Common":[//サイト全体のパブリック スタイル

「common/global.css」

]、

"Module":{ //モジュールとスタイル

"モジュール 1":["製品,.css"]

}、

"Page":{//各ページが所有するスタイル

"index.php":["","sys/index.css"],

//最初の要素にはモジュール参照名が格納されます。そうでない場合は空白のままにします。

"search.php":["モジュール 1","product/search.css"]

//複数のモジュールを「,」で区切って参照します。例: module 1、 module 2

}

}

1. PHPには専用のJSON変換ライブラリがあります
2. jsの構成構造はcssの構成jsonと同じです

f2エンジン.php

1. 構成ファイルが更新されていない場合、json は 1 回だけ解析されて配列になります。
2. リソースを一度だけ解析し、次回直接使用できるように結果を保存します。

例

たとえば、search.php ページのスタイル参照

1. ページに基づいてページレベルのリソースを検索します: Page["search.php"]
2. この配列の最初の値に基づいて、参照されるモジュール スタイルを検索します。
3. 構成ファイルの「圧縮」値に基づいてファイル出力スキームを決定し、それを処理します
4. ページ上に出力

   //フルサイトスタイル共通

   <link type="text/css" href="common/global.pack.css?20091015" rel="stylesheet" />

   //モジュールスタイルモジュール

   <link type="text/css" href="product.pack.css?20091015" rel="stylesheet" />

   //ページスタイルページ

   <link type="text/css" href="product/serach.pack.css?20091015" rel="stylesheet" />

   注: 圧縮後のファイル名は search.pack.css になります。