Easy way to combine and minify JavaScript files and code
Previous article Next articleLoading separate JavaScript files delays the rendering of a web page. Having a large CMS Made Simple website with multiple JS files, it can have a serious effect on your total page load time.
Combine the files into one JS file - just like the {cms_stylesheet} tag does for stylesheets - is a solution for this. I was looking for a simple method to achieve this, but all the methods I found were in my opinion to complex, it needed extra third-party modules and scripts, etc. As always, I wanted a *simple* solution without too much fuss! In this article I will show you what I came up with and you will agree simpler is almost impossible. It's actually a bit too simple, too good to be true. But it really works and I can't think of any cons at the moment :-) I only use the Smarty file_get_contents function to include the content of the separate JS files into one.
As an example, imagine a website needs the following JS code:
<script src="http://www.website.com/path/jquery.cycle.lite.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').cycle( {
delay: -2000,
timeout: 6000,
speed: 2000,
pause: 1
} );
} );
</script>
In this case three files/parts needs to be loaded and we will combine them to just one!! It will have a great effect on your page load.
How to use
1. Create a new User Defined Tag named "content_type"
if ($content_type != '') { cmsms()->set_content_type($content_type); }
if ($content_type == 'text/javascript')
{
header("Cache-Control: max-age=2678400"); // 31 days
header("Cache-Control: public", false);
header("Pragma: public");
}
2. Create a new HTML Template named "blank", that only contains:
3. Install the CGExtentions module.
The module includes the jsmin tag to minify the JavaScript output. If you don't want to install the module you can use the strip tag instead.
4. Create a regular content page named i.e. "JavaScript". In the options tab of the page editor, the page must be set non-searchable, not in menu and WYSIWYG switched off.
Set in options tab also Page URL: "javascript_combined.js" and Template: "blank".
In the page content you add for *this* example:
{content_type type='text/javascript'}
{file_get_contents('http://www.website.com/path/jquery.js')}
{file_get_contents('http://www.website.com/path/jquery.cycle.lite.js')}
$(document).ready(function() {
$('#slider').cycle( {
delay: -2000,
timeout: 6000,
speed: 2000,
pause: 1
} );
} );
{/jsmin}
Note: Don't add the <script> tags around the JavaScript code in the page!
5. We use the file_get_contents PHP function here!
But in the latest Smarty releases due to security settings PHP functions aren't available by default...
If you do want to use PHP functions, you have to enable them by adding this line to your CMSMS config.php file:
This config variable loosens some of the security configuration for smarty templates. Particularly enabling this option allows the use of any PHP function as a Smarty plugin. You better not use this option if you are allowing content to be submitted for display on your website from untrusted sources! If the function works without this line, you better not add it!
We now can use the file_get_contents function!
6. Call in your CMSMS HTML-template the page like a single JavaScript file:
Well, that is all it takes... And trust me, it works!!
Comment Form
ReviewManager
ReviewManager
17 Comments
I did a quick test at 2.2.7, but it works for me...
Hi Rolf, it seems CMSMS V2.2.7 broke this tip. Any input to make it work again? Thanks!
@Klaus,
The method still works! Indeed the demo link fails, I will remove it. At this website I use template inheritance now and the page load is much lower so I didn't need it anymore...
Hi Rolf!
Very nice work!
Now, I've not seen in use very much on your pages, also the demo-link goes 404.
Would you still recommend it or is there another issue?
For example does it make sense to load jquery into this file or would it be faster to get it from a CDN?
I have discovered that the issue is you can't minify already minified JS files. So all files that already minified needs to be moved outside the {jsmin} tags. I am also wondering it this can be combined to possible use defer or async tags?
how can use this code in blogger
Hi Rolf. I wasn't sure if i should post here or make a thread on the CMSMS forums, but i tried using this (looks amazing by the way ;), but it only seems to take the last file of the files i list. So if i only have one JS file it works perfectly, but as soon as i give it two files, it only adds the last one. So it seems to 'overwrite' the file in stead of append to it. Some of the files are already minified if that's of any relevance. Any ideas?
Thanks for your reply, rotezecke
It does work in the 2.x series, but I forgot to add the part about the Smarty Security setting. Just add to your config.php file this line and it works!
$config['permissive_smarty'] = 1;
in 2.0 file_get_contents is disabled. enabling is not recommended. i now use:
{fetch file='path/jquery.js''}
and fetch needs access to path directory. i added this to UDT:
$smarty = cmsms()->GetSmarty();
$smarty->AddTemplateDir('./path');
I'm not a developer, i always use free online js minifier and css compressor.
@rotezecke
Thanks, I added it to the post
i enabled caching by adding this to UDT:
//caching cache
if($params['type'] == 'text/javascript') {
header("Cache-Control: max-age=2678400"); // 31 days
header("Cache-Control: public", false);
header("Pragma: public");
}
looking at firebug net tools, i noticed the combined JS file (unlike the combined CSS file) is not cached by browser. the same combined file (in my case 60kB) is downloaded with every request. the combined JS page is ticked as cachable in CMSMS. JS files outside the combined JS page are cached fine. any idea why this is happening?
you can also use gulp to minify js files. Ref: http://code.tonytuan.org/2014/09/gulp-minify-javascript-files-and-add.html
good stuff. thanks for sharing!
I did everything you said but it's not working for me
Fantastic - thanks so much.
Very very helpful.
Anything that helps page load speed works for me.
Easy way to combine and minify JavaScript files and code
Article optimized for CMSMS 2.x
Author: RolfLast tested in: CMSMS 2.2.3.1
Last updated: 10-06-2019
Comments: 17
http://cms.ms/7IU6
