首頁 > web前端 > js教程 > 主體

詳解使用Minify壓縮css和js文件

coldplay.xixi
發布: 2020-06-13 17:43:10
轉載
4498 人瀏覽過

詳解使用Minify壓縮css和js文件

如何使用Minify壓縮css和js檔案

Minify 是用PHP5開發的應用,透過遵循一些Yahoo的最佳化規則來提高網站的效能。它會合併多個CSS或JavaScript文件,移除一些不必要的空格和註釋,進行gzip壓縮,並且會設定瀏覽器的快取頭。 Minify 在設計上和Yahoo的 Combo Handler Service非常像,不過Minify可以合併任何你想要合併的JavaScript和CSS檔案。

一般情況下,網站速度的瓶頸都在前端,而最關鍵的就是資源的載入速度,但是大多數瀏覽器都有單一網域並發請求數限制,所以如果一個頁面中存在很多的資源,例如CSS和JavaScript文件,那麼明顯會降低網站的載入速度,比較好處理方式就是把多個文件透過一個請求來訪問,這樣既不會影響之前的文件維護,又會減少資源的清楚數量, Minify就是為之而生。以下是一些被Minify採用的Yahoo! 最佳化準則:

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://liqingbo.cn /min/builder/

壓縮單一檔案

比方說,你要服務這個檔案:

http://liqingbo.cn/ wp-content/themes/default/default.css

下面是「Minify網址」該檔案:

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

換句話說,「f」參數設定為從WEB根路徑下的目標檔案(不需要路徑/)」。由於CSS文件可能包含相對URI,Minify會自動透過重寫機制找到它們。

合併多個檔案到一個檔案下載

用','分隔f參數的每一個檔案名稱。

例如,有以下CSS檔:

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

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

您可以透過Minify結合:

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

#簡化基本路徑##如果你合併的檔案共用同一父目錄,你可以使用b參數設定的f參數的基本目錄(同樣不包括前導或後綴/字元)。

#例如,以下兩種寫法效果相同:

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

##http://liqingbo.cn/ 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目錄,使用:

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

"群組":更快的效能和更好的網址為了獲得最佳效能,編輯groupsConfig.php中的預先指定檔案群組

 下面是一個範例設定:

return array(
      'js' => array('//js/Class.js', '//js/email.js')
  );
登入後複製

以上預先指定js將結果是合併瞭如下檔:

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

http://example.com/js/email.js 

現在,您可以如此簡化URL:

http://example.com/min/?g=js

 

群組:指定document_root目錄以外的檔案<p>在<code>groupsConfig.php阵中,//是指向DOCUMENT_ROOT,但你也可以指定从系统的绝对目录路径或相对于document_root的相对目录: 

return array(
      &#39;js&#39; => array(
          &#39;//js/file.js&#39; // file within DOC_ROOT
          ,&#39;//../file.js&#39; // file in parent directory of DOC_ROOT
          ,&#39;C:/Users/Steve/file.js&#39; // 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[&#39;DOCUMENT_ROOT&#39;] . &#39;/min/utils.php&#39;;
$jsUri = Minify_groupUri(&#39;js&#39;);
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.jscssJS分别合并,2个地址。

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

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

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

推荐教程:《JS基础教程

以上是詳解使用Minify壓縮css和js文件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:liqingbo.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板