Explication détaillée de l'utilisation de Minify pour compresser les fichiers CSS et JS

Comment utiliser Minify pour compresser des fichiers css et js

Minify est une application développée avec PHP5, en suivant certaines règles d'optimisation Yahoo pour améliorer les performances du site Web. Il fusionne plusieurs fichiers CSS ou JavaScript, supprime les espaces et commentaires inutiles, effectue une compression gzip et définit les en-têtes de cache du navigateur. Minify a une conception très similaire à celle du service Combo Handler de Yahoo, mais Minify peut fusionner tous les fichiers JavaScript et CSS de votre choix.

Généralement, le goulot d'étranglement de la vitesse du site Web se situe au niveau du front-end, et le plus critique est la vitesse de chargement des ressources. Cependant, la plupart des navigateurs ont une limite sur le nombre de requêtes simultanées pour un seul nom de domaine. Ainsi, s'il y a de nombreuses requêtes sur une page, les ressources, telles que les fichiers CSS et JavaScript, réduiront évidemment la vitesse de chargement du site Web. Une meilleure façon de gérer cela est d'accéder à plusieurs fichiers via une seule requête. Cela n'affectera pas la précédente. la maintenance des fichiers et réduire le nombre clair de ressources. Minify est fait pour cela. Voici quelques directives d'optimisation Yahoo! adoptées par Minify :

Minify compresse et réduit les CSS et JS (Minify : supprime les espaces, les retours chariot, etc.) et intègre plusieurs fichiers CSS et JS dans un seul fichier. Ne pensez pas que votre large bande passante ne justifie pas ce type d'optimisation. La raison la plus importante de son utilisation est la fusion de fichiers, pas la compression, mais la consolidation de fichiers, ce qui peut empêcher le navigateur d'émettre constamment de nouvelles demandes de connexion. Tout comme un serveur FTP, plusieurs petits fichiers et un gros fichier ne prennent pas de temps. le même.

Minify est écrit en PHP, adresse du projet http://code.google.com/p/minify/

1 Téléchargez la dernière version de Minify et décompressez-la dans le répertoire minify.

2. Copiez le répertoire "min" dans votre DOCUMENT_ROOT, qui est le répertoire racine du site Web.

Utilisation de base

Par exemple : http://localhost/a.js, http://localhost/b.js deux fichiers. Alors maintenant, vous pouvez utiliser http://localhost/min/?f=a.js,b.js et voir si le navigateur renvoie le résultat. Est-ce le contenu des deux fichiers js de minify ?

Pièce jointe Les fichiers du répertoire translation min contiennent les paramètres Minify par défaut conçus pour simplifier l'intégration de votre site Web. Minify fusionnera les fichiers JavaScript ou CSS minifiés et effectuera la compression HTTP et la mise en cache des en-têtes.

README.txtRecommandation

Il est recommandé de modifier config.php pour définir $min_cachePath sur un répertoire PHP inscriptible. Cela améliorera les performances. MISE EN ROUTE

Le moyen le plus rapide de démarrer avec Minify est de visiter votre site Web en utilisant l'URI de l'application Minify Builder

 :

Compression Fichier unique

Disons que vous souhaitez diffuser ce fichier :

http://liqingbo.cn/min/builder/

Voici l'"URL Minify" de ce fichier :

En d'autres termes, le paramètre "f" est défini sur le fichier cible à partir du chemin racine WEB (pas besoin de chemin /)". Les fichiers CSS pouvant contenir des URI relatifs, Minify les trouvera automatiquement. via le mécanisme de réécriture . http://liqingbo.cn/wp-content/themes/default/default.css

Fusionnez plusieurs fichiers en un seul fichier pour télécharger

Séparez chaque nom de fichier du paramètre f par ','. Par exemple, il existe le fichier CSS suivant :

http://liqingbo.cn/min/?f=wp-content/themes/default/default.css

Vous pouvez combiner cela avec Minify :

http://liqingbo.cn/scripts/jquery-1.2.6.jsSimplifier le chemin de base

http://liqingbo.cn/scripts/site.jsSi les fichiers que vous fusionnez partagent le même répertoire parent, vous pouvez utiliser le répertoire de base du paramètre f défini par le paramètre b (en excluant également le début ou le suffixe/caractères). suivant. Les deux méthodes d'écriture ont le même effet :

http://example.com/min/?f=scripts/jquery-1.2.6.js,scripts/site.js

Utiliser MINIFY en Html

en (X)HTML. fichiers, n'oubliez pas Remplacer & par &

Spécifier les répertoires autorisés

Par défaut, Minify n'aura aucun fichier *.css/*.js dans la portée DOCUMENT_ROOT si vous souhaitez restreindre Réduisez l'accès. Pour certains répertoires, définissez le tableau

http://liqingbo.cn/min/?f=scripts/jquery-1.2.6.js,scripts/site.js,scripts/home.js

dans config.php. Par exemple : pour limiter les répertoires /js et /themes/default, utilisez :

http://liqingbo.cn/min/?b=scripts&f=jquery-1.2.6.js,site.js,home.js

"Groupes" : des performances plus rapides et de meilleures URL

Pour de meilleures performances, modifiez les groupes de fichiers pré-spécifiés dans groupsConfig.php

Voici un exemple de configuration :

return array(
　　    'js' => array('//js/Class.js', '//js/email.js')
　　);

Le résultat du js pré-spécifié ci-dessus est de fusionner les fichiers suivants :

$min_serveOptions ['minApp'] ['allowDirs']

$min_serveOptions['minApp']['allowDirs'] = array('//js', '//themes/default');　

Maintenant, vous pouvez simplifiez l'URL comme ceci :

Groupe : Spécifiez les fichiers en dehors du répertoire document_roothttp://example.com/js/Class.js

在groupsConfig.php阵中,//是指向DOCUMENT_ROOT，但你也可以指定从系统的绝对目录路径或相对于document_root的相对目录：　

return array(
    　　'js' => array(
        　　'//js/file.js' // file within DOC_ROOT
        　　,'//../file.js' // file in parent directory of DOC_ROOT
        　　,'C:/Users/Steve/file.js' // file anywhere on filesystem
    　　)
　　);

未来过期HTTP头

Minify可以发送未来(一年)过期HTTP头。要启用该功能，您必须添加一个数字到URIs(例如/min/?g=js&1234 or /min/f=file.js&1234)，每当源文件修改时改变该数字。如果你使用SVN/CVS，你可以考虑使用修订版号作为该数字。

如果使用"组"来合并压缩你的文件，可以使用工具函数Minify_groupUri()来得到一个“版本”的URI。例如：

// 之前确保min/lib目录设置到include_path
// add /min/lib to your include_path first!
require $_SERVER['DOCUMENT_ROOT'] . '/min/utils.php';
$jsUri = Minify_groupUri('js');
echo " ";

调试模式

在调试模式下，Minify不压缩文件，而是发送合并后的带有行号的文件。要启用该模式，在config.php中设置为$min_allowDebugFlag为true，并增加"&debug=1" 到你的URIs.

例如：/min/?f=script1.js,script2.js&debug=1

注：对于该模式，注释风格的字符串正则表达式可能会导致问题。

把min目录上传根目录，根目录打开http://example.com/min/

Note: Please set $min_cachePath in /min/config.php to improve performance.

设置/min/config.php文件 ，$min_cachePath 有3个选择。

//$min_cachePath = ‘c://WINDOWS//Temp’;
//$min_cachePath = ‘/tmp’;
//$min_cachePath = preg_replace(‘/^//d+;/’, ”, session_save_path());

选择第2个，去除// .设置tmp属性777

在显示的界面中加入你想合并压缩的 js/css 路径，点击 ‘Update’ 之后会为你生成一个 url

如：http://localhost/min/b=googletesting/js& f=mootools.js,iAction.js,iAjax.js,global.js，css和JS分别合并，2个地址。

如果需要组合的文件很多，url 就会变得很长，Minify 支持 group，可以将这些文件分组，这样 url 中只需指定 g=group名字 就可以了。

安装完毕后删除min/builder/index.php 文件。防止其他人登陆!后期如需编辑再次上传!

如有不明白的地方，可以给我留言，我们可以一起探讨一下。

推荐教程：《JS基础教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!