Easy way to combine and minify JavaScript files and code

  Previous article Next article  

Easy way to combine and minify JavaScript files and code

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.1.4
  Last updated: 31-07-2016
  Comments: 13

Loading 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.js" type="text/javascript"></script>
<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.


A2 Webhosting CMS Made Simple

  How to use

1. Create a new User Defined Tag named "content_type"

content_type
$content_type = get_parameter_value($params,'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:

{content}

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:

{jsmin}
{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:

$config['permissive_smarty'] = 1;

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:

<script src="http://www.website.com/javascript_combined.js" type="text/javascript"></script>

Well, that is all it takes... And trust me, it works!!

  Working example



A2 Webhosting CMS Made Simple

  Comments

  Click here to leave a comment






This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)
  « Enter the CAPTCHA code (lower case)

Your IP address will be stored on submit. I reserve the right to change or delete your response without notice!
In case of abuse your IP address will be blocked!


Can I have your attention for a moment?

Did this tutorial help you solving a problem at your (clients) website and it saved you many hours of work? Great!!
Consider buying Rolf a cup of coffee in return! [ Click here ]


  13 Comments

CMS Made Simple 2.2.2 - Tutorials, tips and tricks - CMSMS 2.2.2

Easy way to combine and minify JavaScript files and code

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.1.4
  Last updated: 31-07-2016
  Comments: 13

A2 Webhosting CMS Made Simple