Thoughts on CSS. JS file publishing mechanism

Liehuo. in the development process, sometimes the page cannot be updated in time due to cache problems, sometimes the page introduces unnecessary style script files, sometimes due to too many files, too large bytes lead to slow page performance. To solve these problems, I have come up with a preliminary solution.

The solution is as follows:

	Description	Remarks
Resource level	Page resource level: Global (Common) Module Level) Page)
Optimization Scheme	The optimization mainly involves the following aspects: Reduce the size of a single file in bytes Reduce the number of files (that is, reduce the number of http requests)	Other optimizations are based on development skills, depending on the professional level.
File output Scheme Merge Compression	The following four schemes are developed based on the resource level and optimization scheme: 1. Directly reference a single file and import it in sequence (<link/> and <script/>) 2. Single file Compression Based on 1 3. Merge data into a single file at the resource level 4. Based on 3, compress the merged files	Thoughts Solution 3: how to determine the number of merged files?
Cache Problems	Timestamp suffix
F2econfig_json	Configuration file: Var f2eJson = { "Version": "v3", // Version "Update": "20091015", // Update the cache based on the timestamp "Compress": "1", // file output Scheme (1, 2, 3, 4) "Common": [// public style of the whole site "Common/global.css" ], "Module": {// Module and Style "Module 1": ["product,.css"] }, "Page": {// the style of each Page "Index. php": ["", "sys/index.css"], // The reference name of the first element storage module. leave it blank if none exist. "Search. php": ["Module 1", "product/search.css"] // Reference multiple modules separated by commas (,), for example, Module 1 and module 2. } }	Php has a dedicated json conversion Library The Configuration Structure of js is the same as that of css configuration json.
F2engine. php	1. Read the json configuration file and convert it to a php array. 2. Search for style resources on the page based on the resource parameters of each page. 3. process according to the file output Scheme 4. output on the page	If the configuration file is not updated, json is parsed as an array only once. Parse the resource only once and save the result for direct use next time
Example	For example, the style reference of the search. php page   Locate the Page-level resource based on the Page: Page ["search. php"] Search for the referenced module style based on the first value of the array Determine the file output scheme based on the "Compress" value in the configuration file and process it 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 <Link type = "text/css" href = "product/serach.pack.css? 20091015 "rel =" stylesheet "/>   Note: after compression, the file name becomes search.pack.css.

 

The Code is under development. You are welcome to discuss it with us.