Optimizing Page Performance with JavaScript Bundling and Minification

Follow

A large number of javascripts on your page can lead to decreased client-side performance, often resulting in slow page load times. 

Active Commerce comes with Cassette, a script minification and bundling tool, built into the skinning system.

Here's how your custom skin can take advantage of Cassette to bundle and minify your scripts:

  • In your custom skin, add a new folder called "scripts". The Active Commerce CassetteConfiguration will automatically look in that directory for other folders to bundle.
  • Inside the new "scripts" folder create one or more new folders to contain your scripts. For example, you might create a "product" folder for scripts that are destined for your product detail page and a "main" folder for scripts that get included everywhere. The names of these folders are arbitrary. Use whatever is the best description for your code.
  • Move the scripts you want bundled and minified into these new folders as appropriate.
  • In Sitecore, go to the appropriate sublayouts and add the bundle name (the name of the folders created above) to the Script Package field. To continue the example above, you would add "product" to the Script Package field on the Product sublayout (/sitecore/layout/Sublayouts/ActiveCommerce/Product) and "main" to the Script Package field on the Main Container sublayout (/sitecore/layout/Sublayouts/ActiveCommerce/Main Container).

     

  • To add more than one bundle name to the Script Package field, use a "|" to separate the names.
  • If you already had script names in the Script Package field that you are now bundling, remove those from the Script Package field.

Now, when you view the product detail page for example, you'll see that all scripts added to the "product" folder will be bundled and minified.

Other Tips

Set the "debug" attribute (you'll find this setting in the web.config: configuration\system.web\compilation) to false for bundling and minification to work. Leave the value of "true" for development machines where you may need to debug your scripts.

Have more questions? Submit a request

Comments