Ελαχιστοποίηση CSS και Javascript

Τελευταία ενημέρωση από Elxis Team

Ενοποίηση πολλαπλών αρχείων CSS ή JS σε ένα και συμπίεση.

Ο CSS/Javascript minifier (ελαχιστοποιητής) αποτελεί μία προσθήκη του Elxis 4.1 που μπορεί να ενοποιήσει πολλαπλά αρχεία CSS/JS και να τα συμπιέσει κερδίζοντας έτσι χώρο και bandwidth. Μπορεί να ενεργοποιηθεί από τις γενικές ρυθμίσεις του Elxis ξεχωριστά για τα CSS και τα JS αρχεία.

How it works

What the minifier does is that it takes all the CSS or Javascript files placed on the document's head section by Elxis and Elxis extensions, unifies them in a single file and saves this file in cache. After, puts this file in the document's head instead of the multiple ones and optionally compress it with gzip. The minifier is smart enough to automatically update the cached file if a new file is added on the head section or something is removed.

Without the minifier. CSS files in document's head section:

<head>
	...
	<link rel="stylesheet" href="http://www.example.com/templates/system/css/standard.css" type="text/css" />
	<link rel="stylesheet" href="http://www.example.com/components/com_content/plugins/download/includes/download.css" type="text/css" />
	<link rel="stylesheet" href="http://www.example.com/includes/js/jquery/colorbox/colorbox.css" type="text/css" />
	<link rel="stylesheet" href="http://www.example.com/modules/mod_categorymap/css/ctgmap.css" type="text/css" />
	...
</head>

With the minifier enabled. Only one CSS file in document's head section:

<head>
	...
	<link rel="stylesheet" href="http://www.example.com/inner.php/minify/something.css" type="text/css" />
	...
</head>

The minifier will exclude external CSS and Javascript files. These files will stay intact in the document's head section.

Enable the minifier

From the Elxis configuration panel you can enable the CSS and the Javascript minifier and also select if you want the unified files to be served compressed with gun zip. Before enabling the minifier for CSS files please read carefully the notes below.


Special care on the CSS minifier

CSS files often contain relative paths to image files. After minifier unifies them it serves the unified file from an other path and so the relative paths wont point to the right file any more and you will face problems with the styling. To fix this you have to update these paths in your CSS files and make them relative to your site's root folder before the minifier runs.

A CSS declaration that will have problem after the CSS minifier runs.

.something { background:url(../images/bg.png) 0 0 no-repeat; }

The same CSS declaration fixed for the minifier.

.something { background:url(/templates/mytemplate/images/bg.png) 0 0 no-repeat; }


Έχει διαβαστεί 8160 φορές
Δρομολογητής Elxis
Επόμενο άρθρο
Δρομολογητής Elxis

Μπορείτε να αντιγράψετε, διανείμετε και παρουσιάσετε τα άρθρα αυτού του ιστότοπου για μη εμπορικούς σκοπούς.
Creative Commons 3.0