A Library to Compress & Combine Javascript & CSS Files
I am happy to say that I have completed implementing the library for the platform and system plugin for the CMS to enable library functionality on CMS.
The library and the CMS plugin can be found in the following links:
- https://github.com/kaviththiranga/joomla-platform/tree/JMedia/libraries/joomla/media
- https://github.com/kaviththiranga/plg_compress/tree/master/plugins/system/compress
In my previous article for the developer network, I have published a guide on using the library to combine and compress Javascript/CSS files. You can find that article here.
First of all, I have to mention that there are some possible changes that I can make to the code of the library as suggested by community members. For an example, removing the usage of JFile and JFolder from the library and using the native php functions instead. Those I have postponed as I didn't have much time to work on that before the final evaluations deadline. You can find my post on the developer mailing list here. You can give your feedback there.
The system plugin for the CMS will be called on onBeforeCompileHead event. The plugin will catch all the assets registered with native platform methods such as addStyleSheet(), addScript() etc. And it will compress, combine and cache the assets according to the options given for the pugin.
Here are some screen shots of the configuration page of the plugin, click to enlarge.
Compression Options
Caching Options
How does the plugin affect the code of the rendered page?
Well, the plugin is not involved in rendering the page. What it really does is replace the $_script, $_scripts, $_style and $_styleSheets attributes of JDocument object with the modified javascript/css files right before the head is compiled.
So, when the head is compiled, the modified assets will be used to render the head of the document. Note that when combining the files, file sets will be created according to the attributes, so only the files that have similar attributes, will be combined.
Below are some screen shots of source code of a rendered html page, before and after the plugin is enabled.
Source of the Page before enabling the plugin
Source of the page after enabling compression
(Note the changed file paths and file names and removed comments in javascript/css declarations)
Source of the page after enabling combining assets
I hope the screen shots will give you a rough idea about the system plugin. All feedback is warmly welcomed. Please give your feedback.
Some articles published on the Joomla Community Magazine represent the personal opinion or experience of the Author on the specific topic and might not be aligned to the official position of the Joomla Project
By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/
Comments