Home  >  Article  >  Web Front-end  >  Minify compresses JS and CSS_html/css_WEB-ITnose

Minify compresses JS and CSS_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:01:06942browse

Minify compresses and reduces CSS and JS (Minify: removes spaces, carriage returns, etc.), and integrates multiple CSS and JS files into one file. Don't think that your large bandwidth doesn't warrant this kind of optimization. The more important reason for using it is file merging, not compression, but file consolidation, which can reduce the browser side from constantly issuing new connection requests. Just like an FTP server, multiple small files and one large file are time-consuming. Not the same.

Minify is written in PHP, project address http://code.google.com/p/minify/

Installation
1. Download the latest Minify then extracts it to the minify directory.
2. Copy the "min" directory to your DOCUMENT_ROOT.

Basic usage
Assume you have http://localhost/a.js, http://localhost /b.js two files. So now, you can use http://localhost/min/?f=a.js,b.js and see if the browser returns the result. Is it the content of the two js files of minify?

Attached is the README.txt in the min directory

Reference


The files in this directory contain default Minify settings, designed to simplify integrating your website. Minify will merge minified JavaScript or CSS files and perform HTTP compression and caching headers.

Recommended
It is recommended to modify config.php to set $min_cachePath to a PHP writable directory. This will improve performance.

GETTING STARTED
The fastest way to get started with Minify is to visit your website using the URI of the Minify Builder application: http://example.com/min/ builder/


Compress a single file For example, you want to serve this file:
http://example.com/wp-content/themes/default/default .css
Here is the "Minify URL" of the file:
http://example.com/min/?f=wp-content/themes/default/default.css

In other words , the "f" parameter is set to the target file from the WEB root path (no need for path /)". Since CSS files may contain relative URIs, Minify will automatically find them through the rewriting mechanism.


Merge multiple files into one file for download Separate each file name of the f parameter with ','
For example, there is the following CSS file:
http://example.com/scripts/ jquery-1.2.6.js
http://example.com/scripts/site.js
You can combine it with Minify:
http://example.com/min/?f=scripts /jquery-1.2.6.js,scripts/site.js


Simplified base path If the files you merge share the same parent directory, you can use the f parameter set by b The basic directory of parameters (also excluding leading or suffix / characters).
For example, the following two ways of writing have the same effect:
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


Use MINIFY in Html In (X)HTML files, don’t forget to replace & with &


Specify allowed directories By default, Minify will not have any *.css/*.js files in the DOCUMENT_ROOT scope. If you want to restrict Minify's access to certain directories, set the
$min_serveOptions ['minApp'] ['allowDirs'] array in config.php. For example: to limit to /js and /themes/default directories, use:

Php code

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


"Group": faster performance and better URL For best performance, edit the pre-specified file groups in groupsConfig.php, here is an example configuration:

Php code

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

The result of the above pre-specified js is to merge the following files:
http://example.com/js/Class.js
http://example.com/js/email.js
Now, you can simplify the URL like this:
http://example.com/min/?g=js

Group: Specify files outside the document_root directory
in groupsConfig In the .php array, // points to DOCUMENT_ROOT, but you can also specify an absolute directory path from the system or a relative directory relative to document_root:

Php code

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

Future Expiration HTTP header
Minify can send future (one year) Expiration HTTP header. To enable this feature, you must add a number to URIs (e.g. /min/?g=js&1234 or /min/f=file.js&1234) and change the number whenever the source file is modified. If you use SVN/CVS, you might consider using the revision number as this number.

If you use "group" to merge and compress your files, you can use the tool function Minify_groupUri() to get a "version" URI. For example:

Php code

  1. // Before making sure the min/lib directory is set to 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 "";


Debug mode
In debug mode, Minify does not compress the file, but sends the merged file with line numbers. To enable this mode, set $min_allowDebugFlag to true in config.php and add "&debug=1" to your URIs.
For example: /min/?f=script1.js,script2.js&debug=1

Note: Comment-style string regular expressions may cause problems for this pattern.
For more questions, please visit http://groups.google.com/group/minify

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn