Minify를 사용하여 CSS 및 js 파일을 압축하는 방법에 대한 자세한 설명

Minify를 사용하여 css 및 js 파일을 압축하는 방법

Minify는 PHP5로 개발된 애플리케이션으로, 일부 Yahoo 최적화 규칙을 따라 웹사이트 성능을 향상시킵니다. 여러 CSS 또는 JavaScript 파일을 병합하고, 불필요한 공백과 주석을 제거하고, gzip 압축을 수행하고, 브라우저 캐시 헤더를 설정합니다. Minify는 Yahoo의 Combo Handler Service와 디자인이 매우 유사하지만 Minify는 병합하려는 JavaScript 및 CSS 파일을 병합할 수 있습니다.

일반적으로 웹 사이트 속도의 병목 현상은 프런트 엔드에 있으며 가장 중요한 것은 리소스 로딩 속도입니다. 그러나 대부분의 브라우저에는 단일 도메인 이름에 대한 동시 요청 수에 제한이 있으므로 CSS 및 JavaScript 파일과 같은 페이지의 많은 리소스로 인해 웹 사이트의 로딩 속도가 확실히 감소합니다. 이를 처리하는 더 좋은 방법은 한 번의 요청을 통해 여러 파일에 액세스하는 것입니다. 이는 이전 파일 유지 관리에 영향을 미치지 않으며 속도를 줄입니다. 명확한 수의 리소스가 탄생했습니다. 다음은 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 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

　

참조

🎜🎜 파일에는 웹 사이트 통합을 단순화하도록 설계된 기본 Minify 설정이 포함되어 있습니다. Minify는 축소된 JavaScript 또는 CSS 파일을 병합하고 HTTP 압축 및 캐싱 헤더를 수행합니다. 🎜🎜권장🎜🎜$min_cachePath를 PHP 쓰기 가능 디렉터리로 설정하도록 config.php를 수정하는 것이 좋습니다. 이렇게 하면 성능이 향상됩니다. 🎜🎜시작하기🎜🎜 Minify를 시작하는 가장 빠른 방법은 Minify Builder 애플리케이션의 URI를 사용하여 웹사이트를 방문하는 것입니다🎜🎜: http://liqingbo.cn/min/builder/🎜 🎜Zip 단일 파일🎜🎜예를 들어 다음 파일을 제공하려고 합니다.🎜🎜http://liqingbo.cn/wp-content/themes/default/default.css🎜🎜다음은 "URL 축소" 파일: 🎜🎜http://liqingbo.cn/min/?f=wp-content/themes/default/default.css🎜🎜즉, "f" 매개변수는 루트 경로(경로 / 필요 없음) 아래의 WEB 대상 파일에서 설정됩니다. CSS 파일에는 상대 URI가 포함될 수 있으므로 Minify는 다시 쓰기 메커니즘을 통해 자동으로 해당 URI를 찾습니다. 🎜🎜다운로드를 위해 여러 파일을 하나의 파일로 병합 🎜🎜 f를 ','로 구분합니다. 매개변수의 각 파일 이름은 🎜🎜예를 들어 다음과 같은 CSS 파일이 있습니다. 🎜🎜http://liqingbo.cn/scripts/jquery-1.2.6.js</code >🎜🎜<code>http:/ /liqingbo.cn/scripts/site.js🎜🎜Minify를 통해 결합할 수 있습니다: 🎜🎜http://example.com/min/?f= scripts/jquery-1.2.6.js ,scripts/site.js🎜🎜🎜단순화된 기본 경로🎜🎜🎜병합하는 파일이 동일한 상위 디렉터리를 공유하는 경우 f 매개 변수 집합의 기본 디렉터리를 사용할 수 있습니다. b 매개변수로(선행 또는 접미사/문자 제외) 🎜🎜예를 들어 다음 두 가지 작성 방법은 동일한 효과를 갖습니다: 🎜🎜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 파일을 특정 디렉터리에 제한하려면 🎜🎜$min_serveOptions ['minApp'] ['allowDirs']를 설정하세요. config.php의 배열. 예: /js 및 /themes/default 디렉터리로 제한하려면 다음을 사용하세요. 🎜🎜$min_serveOptions['minApp']['allowDirs'] = array('//js', '//themes/default '); 🎜🎜"그룹": 더 빠른 성능과 더 나은 URL🎜🎜최상의 성능을 위해 groupsConfig.php🎜🎜에서 미리 지정된 파일 그룹을 편집하세요. 다음은 구성 예입니다. 🎜

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
    　　)
　　);

🎜위의 사전- set 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的相对目录：　

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基础教程》

위 내용은 Minify를 사용하여 CSS 및 js 파일을 압축하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!