📜 ⬆️ ⬇️

Reduced download time for js and css files

Every developer of javascript applications sooner or later faces the problem of a large (relatively, of course) loading time for connected js and css files. This problem is known to occur for two reasons: a large number of attachments (the browser has a limit on the number of simultaneously downloaded files, so one does not download yet, the browser does not start downloading the other) and the large size of the libraries used (prototype, extjs, etc.). d.)

The solution could be to manually merge all the included files into one, but this makes it inconvenient to further adjust the files, so it is advisable to use automatic assembly and compression of the final file. But, compression increases the load on the server, so it is desirable to use caching, and taking into account the possibility of changing files ...
Developer Niels Leenheer (http://rakaz.nl/) proposed the implementation of the described procedure in his script: rakaz.nl/projects/combine/combine.phps
Setting up the script is easy and consists in placing the file combine.php in the root of your site, creating separate directories for javascript, css and cache files and writing these paths in the file combine.php

An example of relative paths from the location of combine.php:
$cachedir = dirname(__FILE__) . '/cache';
$cssdir = dirname(__FILE__) . '/css';
$jsdir = dirname(__FILE__) . '/script';

Next, you must either create or modify the .htaccess file with the following contents:
RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1
RewriteRule ^javascript/(.*\.js) /combine.php?type=javascript&files=$1

If the .htaccess file already exists and RewriteEngine is used, then the first two lines are not needed.

Example of use:
<script type="text/javascript" src="script/yui-utilities.js,ext-yui-adapter.js,ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="css/ext-all.css,vista.css,main.css">

How effectively the described solution can be solved by yourself.


Source: https://habr.com/ru/post/10500/

All Articles