Maison interface Web tutoriel HTML Minify压缩JS和CSS_html/css_WEB-ITnose

Minify压缩JS和CSS_html/css_WEB-ITnose

Jun 24, 2016 pm 12:01 PM
css js minify 压缩

Minify把CSS和JS压缩和削减(Minify:去掉空格回车符等),以及把多个CSS,JS文件整合到一个文件里。不要以为你的大带宽没有必要进行这类优化。使用它的理由更重要的是文件合并,而不是压缩,而是文件整合,这样可以减少浏览器端不断发出新的连接请求,就像FTP服务器一样,多个小文件和一个大文件耗时是不一样的。 

Minify是用PHP写的,项目地址 http://code.google.com/p/minify/ 

安 装 
   1. 下载最新的Minify然后解压缩到minify目录。 
   2. 复制"min"目录到你的DOCUMENT_ROOT. 

基本用法 
假设你有http://localhost/a.js,http://localhost/b.js两个文件。那么现在,你可以使用http://localhost/min/?f=a.js,b.js,看看浏览器返回结果,是不是minify的两个js文件的内容? 

附译min目录下的README.txt 

引用


该目录中的文件包含默认Minify设置,旨在简化整合您的网站。Minify将合并削减JavaScript或CSS文件,并进行HTTP压缩和缓存头。 

推 荐 
建议修改config.php中设置$min_cachePath到一个PHP可写目录。这将提高性能。 

GETTING STARTED 
最快的开始Minify的方法是使用Minify Builder应用程序的URI 
访问您的网站: http://example.com/min/builder/ 

压缩单个文件 
比方说,你要服务于这个文件: 
   http://example.com/wp-content/themes/default/default.css 
下面是“Minify网址”该文件: 
   http://example.com/min/?f=wp-content/themes/default/default.css 

换句话说,“f”参数设置为从WEB根路径下的目标文件(不需要路径/)”。由于CSS文件可能包含相对URI,Minify会自动通过重写机制找到它们。 

合并多个文件到一个文件下载 
用','分隔f参数的每一个文件名。 
比如,有如下CSS文件: 
   http://example.com/scripts/jquery-1.2.6.js 
   http://example.com/scripts/site.js 
您可以通过Minify结合起来: 
   http://example.com/min/?f=scripts/jquery-1.2.6.js,scripts/site.js 

简化基本路径 
如果你合并的文件共享同一父目录,你可以使用b参数设置的f参数的基本目录(同样不包括前导或者后缀/字符)。 
例如,以下两种写法效果相同: 
   http://example.com/min/?f=scripts/jquery-1.2.6.js,scripts/site.js,scripts/home.js 
   http://example.com/min/?b=scripts&f=jquery-1.2.6.js,site.js,home.js 

在Html中使用MINIFY 
在(X)HTML文件,不要忘记将&替换为& 

指定允许的目录 
默认情况下,Minify不会有任何DOCUMENT_ROOT范围内的*.css/*.js文件。如果你希望限制Minify存取某些目录,在config.php中设置 
$min_serveOptions ['minApp'] ['allowDirs']数组。例如:限制到/js和/themes/default目录,使用: 

Php代码  

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


"组":更快的性能和更好的网址 
为了获得最佳性能,编辑groupsConfig.php中的预指定文件组,下面是一个例子配置: 

Php代码  

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

以上预指定js将结果是合并了如下文件: 
   http://example.com/js/Class.js 
   http://example.com/js/email.js 
现在,您可以如此简化URL: 
   http://example.com/min/?g=js 
  
组:指定document_root目录以外的文件 
在groupsConfig.php阵中,//是指向DOCUMENT_ROOT,但你也可以指定从系统的绝对目录路径或相对于document_root的相对目录: 

Php代码  

  1. return array(  
  2.   'js' => array(  
  3.     '//js/file.js'            // file within DOC_ROOT  
  4.     ,'//../file.js'           // file in parent directory of DOC_ROOT  
  5.     ,'C:/Users/Steve/file.js' // file anywhere on filesystem  
  6.   )  
  7. );  

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

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

Php代码  

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


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

注:对于该模式,注释风格的字符串正则表达式可能会导致问题。 
更多问题请访问  http://groups.google.com/group/minify

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser le bouton bootstrap Comment utiliser le bouton bootstrap Apr 07, 2025 pm 03:09 PM

Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton

Comment redimensionner le bootstrap Comment redimensionner le bootstrap Apr 07, 2025 pm 03:18 PM

Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-

Comment écrire des lignes fendues sur bootstrap Comment écrire des lignes fendues sur bootstrap Apr 07, 2025 pm 03:12 PM

Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.

Comment afficher la date de bootstrap Comment afficher la date de bootstrap Apr 07, 2025 pm 03:03 PM

Réponse: Vous pouvez utiliser le composant de sélecteur de date de bootstrap pour afficher les dates dans la page. Étapes: Présentez le framework bootstrap. Créez une boîte d'entrée de sélecteur de date dans HTML. Bootstrap ajoutera automatiquement des styles au sélecteur. Utilisez JavaScript pour obtenir la date sélectionnée.

Comment configurer le cadre de bootstrap Comment configurer le cadre de bootstrap Apr 07, 2025 pm 03:27 PM

Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.

Comment insérer des photos sur bootstrap Comment insérer des photos sur bootstrap Apr 07, 2025 pm 03:30 PM

Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.

Comment vérifier la date de bootstrap Comment vérifier la date de bootstrap Apr 07, 2025 pm 03:06 PM

Pour vérifier les dates dans Bootstrap, suivez ces étapes: introduisez les scripts et styles requis; initialiser le composant de sélecteur de date; Définissez l'attribut Data-BV-Date pour activer la vérification; Configurer les règles de vérification (telles que les formats de date, les messages d'erreur, etc.); Intégrez le cadre de vérification de bootstrap et vérifiez automatiquement l'entrée de date lorsque le formulaire est soumis.

Comment utiliser Bootstrap en Vue Comment utiliser Bootstrap en Vue Apr 07, 2025 pm 11:33 PM

L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.

See all articles