Reflexiones sobre el mecanismo de publicación de archivos CSS.JS

describir

Observación

nivel de recursos

Nivel de recursos de la página:

1. Nivel global (común)
2. Nivel de módulo
3. Nivel de página (Página)

Plan de optimización

La optimización se centra principalmente en los siguientes aspectos:

1. Reducir el tamaño de bytes de un solo archivo
2. Reducir la cantidad de archivos (es decir, reducir la cantidad de solicitudes http)

Otras optimizaciones se basan en las habilidades de desarrollo y dependen del nivel de experiencia.

Solución de salida de archivos

1. unir
2. compresión

Con base en los niveles de recursos y los planes de optimización, se formulan los siguientes cuatro planes:


1. Citar directamente un solo archivo e introducirlo en secuencia (<link/>, <script/>)


2. Basado en 1, realice la compresión de un solo archivo


3. Fusionar en un nuevo archivo único según el nivel de recursos


4. Basado en 3, comprime los archivos combinados.

Pensamientos

Opción 3: ¿Cómo determinar la cantidad de archivos combinados?

problema de almacenamiento en caché

Usar sufijo de marca de tiempo

f2econfig_json

Archivo de configuración:

varf2eJson={
"Versión":"v3",//versión

"Update":"20091015",//Actualizar caché según la marca de tiempo

"Compress":"1",//Esquema de salida del archivo (1, 2, 3, 4)

"Común":[//Estilo público para todo el sitio

"común/global.css"

],

"Módulo":{ //Módulo y estilo

"Módulo 1":["producto,.css"]

},

"Página":{//Estilos propiedad de cada página

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

//El primer elemento almacena el nombre de referencia del módulo, si no, déjalo en blanco.

"search.php":["Módulo 1","producto/search.css"]

//Hace referencia a varios módulos, separados por ",", por ejemplo: módulo 1, módulo 2

}

}

1. PHP tiene una biblioteca de conversión json dedicada
2. La estructura de configuración de js es la misma que la configuración json de css

f2engine.php

1. Cuando el archivo de configuración no se actualiza, json solo se analiza una vez en una matriz.
2. Analice el recurso solo una vez y guarde el resultado para usarlo directamente la próxima vez.

ejemplo

Por ejemplo, la referencia de estilo de la página search.php.

1. Encuentre recursos a nivel de página según la página: Página["search.php"]
2. Encuentre el estilo del módulo al que se hace referencia según el primer valor de esta matriz
3. Determine el esquema de salida del archivo según el valor "Comprimir" en el archivo de configuración y procéselo
4. Salida en la página

   //Estilo completo del sitio común

   <enlace tipo="text/css" href="common/global.pack.css?20091015" rel="hoja de estilo" />

   //Módulo de estilo de módulo

   <enlace tipo="text/css" href="product.pack.css?20091015" rel="hoja de estilo" />

   //Página de estilo de página

   <enlace tipo="text/css" href="product/serach.pack.css?20091015" rel="hoja de estilo" />

   Nota: Después de la compresión, el nombre del archivo se convierte en search.pack.css