SharePoint 2013: Toggling between minimized and debugged version of java scripts

There is no doubt that including a minimized versions of your scripts (and css files) is best practice, not only for SharePoint but for any Web Application. However, this practice is often ignored by many programmers. Minimized version of script significantly reduces the page’ payload, especially for large javascript (and css files). Just to give you a comparison, debug version of JQuery 2.0.3 version is 246KB but its minimized counterpart is only 82KB.

On the other hand, debugged version of scripts are convenient for developers because setting breakpoints and debugging using developer toolbars is easier.

Now, what if we could archive best of both the worlds! What if we could toggle between debugged version and minimized version without re-deploying anything? Well, I would love it and so I thought about using the technique that I described here.

Note following though:

• Even though this post uses some SharePoint 2013, with just a little tweak it can be applied to SharePoint 2010 as well.
• The technique here shows only one JavaScript file, but as many JavaScripts as you want can be included.
• Similar technique can be used for CSS files as well
• I have used a couple of site collection level FEATURES which are visible on Site Collection Features page. But if you prefer, you may make them hidden and activate them using PowerShell.

Let’s go to the business now!

The first step is to create a UserControl in your solution and put it under ControlTemplates mapped folder as shown below:

Define a property in your code behind of the User Control as shown below:

   1:   private bool _minimized = false;

   2:   

   3:          public bool Minimized

   4:          {

   5:              get { return _minimized; }

   6:              set { _minimized = value; }

   7:          }

Now refer your scripts on in the .ascx file as shown below:

<% if (Minimized == true) {%>
    <script type="text/javascript" src="/_layouts/MyApp/scripts/jquery-2.0.3.min.js"></script>
    <!-- Other files goes here-->
<% }else{ %>
    <script type="text/javascript" src="/_layouts/MyApp/scripts/jquery-2.0.3.js"></script>
    <!-- Other files goes here-->
<%} %>

You may have to provide your own script paths..

Next, create two FEATURES and Add two empty elements using VS.NET’s “Empty Element” project item as shown below:

Add one empty element to each feature. You may use your own naming conventions for your FEATUREs and Elements.

The content of MimimizedScript –> Elements.xml file would look like this:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Control Id="AdditionalPageHead" ControlSrc="/_controltemplates/15/MyApp/MyAppScriptReferences.ascx" Sequence="20">
    <Property Name="Minimized">true</Property>
  </Control>
</Elements>

And the content of RegularScripts—>Elements.xml file would look like this:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Control Id="AdditionalPageHead" ControlSrc="/_controltemplates/15/MyApp/MyAppScriptReferences.ascx" Sequence="21">
    <Property Name="Minimized">false</Property>
  </Control>
</Elements>

Note the path to my user control, in SharePoint 2010, the path would look different.

Deploy your solution and get ready to see it in action. I have two FEATURES and I have activated the minimized version as shown below:

 

When minimized version FEATURE is activated, I enjoy the performance benefits of minimized version of my scripts.

If I want to debug my JavaScript, all I need to do is deactivate the old feature and activate the feature which provisions regular debug version of scripts. As soon as I do that, regular JavaScript becomes available as shown below:

I think this is very convenient but it may not be necessarily the best option. If you find this useful or have a better idea, please leave comments below.

Technorati Tags: SharePoint,SharePoint 2013,SharePoint 2010