CSS.JS檔案發布機制的思考

描述

備註

資源等級

頁面的資源層級：

1. 全域級（Common）
2. 模組級（Module）
3. 頁面級（Page）

最佳化方案

優化主要從以下幾個方面：

1. 減少單一檔案的位元組大小
2. 減少檔案的個數（即減少http請求數）

其他的最佳化是從開發技巧上進行的，取決於專業水平

文件輸出方案

1. 合併
2. 壓縮

基於資源等級及最佳化方案，制定以下4種方案：


1.直接引用單一文件依序引入（<link/>、<script/>）


2、基於1，進行單一檔案壓縮


3、依照資源等級合併成新的單一文件


4.基於3，進行合併後的檔案壓縮

思考點

方案3： 如何確定合併的檔案個數？

快取問題

採用時間戳後綴

f2econfig_json

設定檔：

var f2eJson={
"Version":"v3",//版本

"Update":"20091015",//根據時間戳更新快取

"Compress":"1",//檔案輸出方案（1，2，3，4）

"Common":[//全站公共樣式

"common/global.css"

],

"Module":{ //模組及樣式

"模組1":["product,.css"]

},

"Page":{//每個頁面所擁有的樣式

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

//第一個元素儲存模組引用名稱，無則留空

"search.php":["模組1","product/search.css"]

//引用多個模組，用“，”隔開，例如： 模組1，模組2

}

}

1. php有專門的json轉換庫
2. js的配置結構同css的配置json

f2engine.php

1. 設定檔沒有更新的情況下，只解析一次json為數組
2. 只解析一次資源，並將結果保存，供下次直接使用

例子

例如search.php這個頁面的樣式引用

1. 根據頁面找到頁面級資源： Page["search.php"]
2. 根據該數組的第一個值來尋找所引用的模組樣式
3. 根據設定檔中的「Compress」值決定檔案輸出方案，並進行處理
4. 在頁面上進行輸出

   //全站樣式common

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

   //模組樣式module

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

   //頁面樣式page

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

   注意:壓縮後檔案名稱變成 search.pack.css