Réflexions sur le mécanisme de publication de fichiers CSS.JS

décrire

Remarque

niveau de ressource

Niveau de ressource de la page :

1. Niveau mondial (commun)
2. Niveau du module
3. Niveau de la page (Page)

Plan d'optimisation

L'optimisation se concentre principalement sur les aspects suivants :

1. Réduire la taille en octets d'un seul fichier
2. Réduire le nombre de fichiers (c'est-à-dire réduire le nombre de requêtes http)

D'autres optimisations reposent sur les compétences de développement et dépendent du niveau d'expertise

Solution de sortie de fichiers

1. fusionner
2. compression

Sur la base des niveaux de ressources et des plans d'optimisation, les quatre plans suivants sont formulés :


1. Citez directement un seul fichier et introduisez-le dans l'ordre (<link/>, <script/>)


2. Sur la base de 1, effectuez une compression de fichier unique


3. Fusionner dans un nouveau fichier unique en fonction du niveau de ressource


4. Basé sur 3, compressez les fichiers fusionnés

Pensées

Option 3 : Comment déterminer le nombre de fichiers fusionnés ?

problème de mise en cache

Utiliser le suffixe d'horodatage

f2econfig_json

Fichier de configuration :

varf2eJson={
"Version": "v3",//version

"Update": "20091015", // Mettre à jour le cache selon l'horodatage

"Compress": "1",//Schéma de sortie de fichier (1, 2, 3, 4)

"Common":[//Style public pour l'ensemble du site

"commun/global.css"

],

"Module":{ //Module et style

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

},

"Page" :{//Styles appartenant à chaque page

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

//Le premier élément stocke le nom de référence du module, sinon, laissez-le vide.

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

//Référence à plusieurs modules, séparés par ",", par exemple : module 1, module 2

}

}

1. PHP dispose d'une bibliothèque de conversion json dédiée
2. La structure de configuration de js est la même que la configuration json de css

f2engine.php

1. Lorsque le fichier de configuration n'est pas mis à jour, json n'est analysé qu'une seule fois dans un tableau.
2. Analysez la ressource une seule fois et enregistrez le résultat pour une utilisation directe la prochaine fois

exemple

Par exemple, la référence de style de la page search.php

1. Rechercher des ressources au niveau de la page en fonction de la page : Page["search.php"]
2. Recherchez le style de module référencé en fonction de la première valeur de ce tableau
3. Déterminez le schéma de sortie du fichier en fonction de la valeur "Compresser" dans le fichier de configuration et traitez-le
4. Sortie sur la page

   //Style de site complet commun

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

   //Module de style de module

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

   //Style de page

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

   Remarque : Après compression, le nom du fichier devient search.pack.css