Thoughts on CSS.JS file publishing mechanism

describe

Remark

resource level

Resource level of the page:

1. Global level (Common)
2. Module level
3. Page level (Page)

Optimization plan

Optimization mainly focuses on the following aspects:

1. Reduce the byte size of a single file
2. Reduce the number of files (i.e. reduce the number of http requests)

Other optimizations are based on development skills and depend on the level of expertise

File output solution

1. merge
2. compression

Based on resource levels and optimization plans, the following four plans are formulated:


1. Directly quote a single file and introduce it in sequence (<link/>, <script/>)


2. Based on 1, perform single file compression


3. Merge into a new single file according to resource level


4. Based on 3, compress the merged files

Thoughts

Option 3: How to determine the number of merged files?

caching problem

Use timestamp suffix

f2econfig_json

Configuration file:

var f2eJson={
"Version":"v3",//version

"Update":"20091015",//Update cache according to timestamp

"Compress":"1",//File output scheme (1, 2, 3, 4)

"Common":[//Public style for the entire site

"common/global.css"

],

"Module":{ //Module and style

"Module 1":["product,.css"]

},

"Page":{//Styles owned by each page

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

//The first element stores the module reference name, if not, leave it blank.

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

//Reference multiple modules, separated by ",", for example: module 1, module 2

}

}

1. PHP has a dedicated json conversion library
2. The configuration structure of js is the same as the configuration json of css

f2engine.php

1. When the configuration file is not updated, json is only parsed once into an array.
2. Only parse the resource once and save the result for direct use next time

example

For example, the style reference of the search.php page

1. Find page-level resources based on the page: Page["search.php"]
2. Find the referenced module style based on the first value of this array
3. Determine the file output scheme based on the "Compress" value in the configuration file and process it
4. Output on the page

   //Full site style common

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

   //Module style module

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

   //Page style page

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

   Note: After compression, the file name becomes search.pack.css