Ausführliche Erklärung der Verwendung von Minify zum Komprimieren von CSS- und JS-Dateien

So verwenden Sie Minify zum Komprimieren von CSS- und JS-Dateien

Minify ist eine mit PHP5 entwickelte Anwendung, wie folgt einige Yahoo-Optimierungsregeln zur Verbesserung der Website-Leistung. Es führt mehrere CSS- oder JavaScript-Dateien zusammen, entfernt unnötige Leerzeichen und Kommentare, führt eine GZIP-Komprimierung durch und legt Browser-Cache-Header fest. Minify ist im Design dem Combo Handler Service von Yahoo sehr ähnlich, Minify kann jedoch beliebige JavaScript- und CSS-Dateien zusammenführen.

Im Allgemeinen liegt der Engpass der Website-Geschwindigkeit am Front-End, und der kritischste Faktor ist die Ladegeschwindigkeit der Ressourcen. Die meisten Browser haben jedoch eine Begrenzung der Anzahl gleichzeitiger Anfragen für einen einzelnen Domainnamen. Wenn es also viele Anfragen auf einer Seite gibt, verringern Ressourcen wie CSS- und JavaScript-Dateien offensichtlich die Ladegeschwindigkeit der Website. Eine bessere Möglichkeit, damit umzugehen, besteht darin, über eine Anfrage auf mehrere Dateien zuzugreifen Hierfür ist Minify gedacht, um die Dateipflege zu vereinfachen und die Anzahl der Ressourcen deutlich zu reduzieren. Im Folgenden finden Sie einige von Minify übernommene Yahoo!-Optimierungsrichtlinien:

Minify komprimiert und reduziert CSS und JS (Minify: entfernt Leerzeichen, Wagenrückläufe usw.) und integriert mehrere CSS- und JS-Dateien in eine Datei. Denken Sie nicht, dass Ihre große Bandbreite diese Art der Optimierung nicht rechtfertigt. Der wichtigere Grund für die Verwendung ist die Dateizusammenführung, nicht die Komprimierung, sondern die Dateikonsolidierung, wodurch die Browserseite davon abgehalten werden kann, ständig neue Verbindungsanfragen zu stellen. Genau wie beim FTP-Server sind mehrere kleine Dateien und eine große Datei zeitaufwändig das gleiche.

Minify ist in PHP geschrieben, Projektadresse http://code.google.com/p/minify/

1 Laden Sie das neueste Minify herunter und entpacken Sie es in das Minify-Verzeichnis.

2. Kopieren Sie das Verzeichnis „min“ in Ihr DOCUMENT_ROOT, das Stammverzeichnis der Website.

Grundlegende Verwendung

Zum Beispiel: http://localhost/a.js, http://localhost/b.js zwei Dateien. Jetzt können Sie http://localhost/min/?f=a.js,b.js verwenden und prüfen, ob der Browser das Ergebnis zurückgibt. Ist es der Inhalt der beiden js-Dateien von minify?

Anhang Die Dateien im Übersetzungsverzeichnis min enthalten standardmäßige Minify-Einstellungen, die die Integration Ihrer Website vereinfachen sollen. Minify führt minimierte JavaScript- oder CSS-Dateien zusammen und führt HTTP-Komprimierung und Caching-Header durch. README.txt

Empfehlung

Es wird empfohlen, config.php zu ändern, um $min_cachePath auf ein PHP-beschreibbares Verzeichnis festzulegen. Dadurch wird die Leistung verbessert.

ERSTE SCHRITTE

Der schnellste Weg, mit Minify zu beginnen, besteht darin, Ihre Website mit dem URI

der Minify Builder-Anwendung zu besuchen:

Komprimierung Einzelne Datei

Angenommen, Sie möchten diese Datei bereitstellen:

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

Hier ist die „Minimierungs-URL“ für diese Datei:

http://liqingbo.cn/wp-content/themes/default/default.cssMit anderen Worten, der Parameter „f“ wird auf die Zieldatei aus dem WEB-Stammpfad gesetzt (Pfad / ist nicht erforderlich). Da CSS-Dateien relative URIs enthalten können, findet Minify diese automatisch durch den Umschreibemechanismus.

Mehrere Dateien zu einer Datei zusammenführen, um sie herunterzuladen

Trennen Sie jeden Dateinamen des f-Parameters durch „,“. Es gibt beispielsweise die folgende CSS-Datei: http://liqingbo.cn/min/?f=wp-content/themes/default/default.css

Sie können dies mit Minify kombinieren:

http://liqingbo.cn/scripts/jquery-1.2.6.js

Basispfad vereinfachen http://liqingbo.cn/scripts/site.js

Wenn die Dateien, die Sie zusammenführen, dasselbe übergeordnete Verzeichnis haben, können Sie das Basisverzeichnis des durch den b-Parameter festgelegten f-Parameters verwenden (auch ohne die führenden oder angehängten /-Zeichen). Die beiden Schreibweisen haben den gleichen Effekt:

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

Verwenden Sie MINIFY in Html

in (X)HTML Dateien, vergessen Sie nicht, & durch & zu ersetzen

Geben Sie zulässige Verzeichnisse an

http://liqingbo.cn/min/?f=scripts/jquery-1.2.6.js,scripts/site.js,scripts/home.jsStandardmäßig hat Minify keine *.css/*.js-Dateien im DOCUMENT_ROOT-Bereich, wenn Sie dies einschränken möchten Den Zugriff minimieren. Legen Sie für bestimmte Verzeichnisse das Array

http://liqingbo.cn/min/?b=scripts&f=jquery-1.2.6.js,site.js,home.js in config.php fest. Um beispielsweise auf die Verzeichnisse /js und /themes/default zu beschränken, verwenden Sie:

„Gruppen“: schnellere Leistung und bessere URLs

Für beste Leistung bearbeiten Sie die vorab festgelegten Dateigruppen in groupsConfig.php

Hier ist eine Beispielkonfiguration:

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

$min_serveOptions ['minApp'] ['allowDirs']Das Ergebnis der oben angegebenen js ist das Zusammenführen der folgenden Dateien:

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

　

Jetzt können Sie Vereinfachen Sie die URL wie folgt:

http://example.com/js/Class.js

Gruppe: Geben Sie Dateien außerhalb des document_root-Verzeichnisses anhttp://example.com/js/email.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基础教程》

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der Verwendung von Minify zum Komprimieren von CSS- und JS-Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!