Home / AJAX

HOW TO Combine Scripts using the Script Loader

RSS
Modified on 2009/12/04 17:21 by Stephen Walther Categorized as Uncategorized
Script combining is the process of merging multiple scripts into one script so that it can be downloaded with a single network call. By using script combining, frequently used scripts or script dependencies can be combined, placed on the server, and then downloaded using the Script Loader. The ASP.NET Ajax Library provides support for loading combined scripts defined in Start.js or in custom metadata scripts. This HOW TO tutorial will demonstrate how script combining works and how you can take advantage of it in your Ajax applications.

The ASP.NET Ajax Library's Start.js file defines several different scripts and their dependencies. An example of the definition for the MicrosoftAjaxCore.js and MicrosoftAjax.js files is shown next:
loader.defineScripts({
    releaseUrl: "%/MicrosoftAjax" + "{0}.js",
    debugUrl: "%/MicrosoftAjax" + "{0}.debug.js",
    executionDependencies: ["Core"]
    },
    [
     { 
       name: "Core", 
       executionDependencies: null, 
       isLoaded: !!window.Type },

//Other scripts defined here // Composite Scripts { name: "MicrosoftAjax", releaseUrl: "%/MicrosoftAjax.js", debugUrl: "%/MicrosoftAjax.debug.js", executionDependencies: null, contains: ["Core", "ComponentModel", "History", "Serialization", "Network", "WebServices", "Globalization"] } ] );
The definition for Core (MicrosoftAjaxCore.js) contains no dependencies or executionDependencies but does define how to detect when the script has loaded. The MicrosoftAjax.js definition on the other hand defines the debug and release path for the script, that it has no executionDependencies, and that it is a composite script containing 7 different scripts. When a page requests these 7 scripts using Sys.require, the Script Loader will automatically load the combined MicrosoftAjax.js script to minimize the number of network calls. This same pattern can be followed for custom scripts that need to be combined into a single script and loaded by the Script Loader.

The following code will cause the Script Loader to load the composite script automatically due to the MicrosoftAjax definition shown earlier from Start.js:
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/beta/0911/Start.js"></script>
<script type="text/javascript">
    Sys.require([
        Sys.scripts.Core,
        Sys.scripts.ComponentModel,
        Sys.scripts.Network,
        Sys.scripts.Serialization,
        Sys.scripts.History,
        Sys.scripts.Globalization,
        Sys.scripts.WebServices
    ]);
</script>


Figure 1 shows the scripts that are loaded as reported by the Internet Explorer 8 Developer Tools.

Image

Figure 1. Scripts loaded by the Script Loader when a composite script is available on the server.

Multiple Sys.require requests can be made within a page but doing so prevents script combining from being used by the Script Loader. As a result, taking advantage of the Script Loader's ability to load a combined script by defining a single Sys.require statement is recommended. The following example will load the required scripts individually rather than loading the composite MicrosoftAjax.js script:
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/beta/0911/Start.js"></script>
<script type="text/javascript">
    Sys.require([Sys.scripts.Core]);
    Sys.require([Sys.scripts.ComponentModel]);
    Sys.require([Sys.scripts.Network]);
    Sys.require([Sys.scripts.Serialization]);
    Sys.require([Sys.scripts.History]);
    Sys.require([Sys.scripts.Globalization]);
    Sys.require([Sys.scripts.WebServices]);
</script>


Figure 2 shows the result of making multiple Sys.require calls in a page.

Image

Figure 2. Having multiple Sys.require statements in a page bypasses script combining efficiencies.
  Name Size
- NoScriptCombining.jpg 18.10 KB
- ScriptCombining.jpg 10.04 KB