Skip to content

Using the AMD Optimizer via the HTML Filter

rbackhouse edited this page Apr 14, 2012 · 7 revisions

Using the AMD Optimizer via the HTML Filter

You can write HTML resources and let the HTML Filter insert the script tag to load the required javascript. The HTML Filter will scan javascript embedded in script tags. It will also attempt to scan javascript that is contained in javascript resources referenced by script tags with "src" attributes. In both cases the javascript is parsed to obtain the "zazl" entry point reference. The reference is used to determine the ids of the AMD modules that need to be analyzed and optimized.

Here is a gist showing an HTML resource where the "zazl" entry point is embedded in a script tag :

https://gist.github.com/1615991

In this example the "zazl" reference will be analyzed and the AMD module "amdtest/Calendar" will be considered the top Module to be optimized.

<script type="text/javascript">
    zazl({
        packages: [
            {
                name: 'dojo',
                location: 'lib/dojo'
            },
            {
                name: 'dijit',
                location: 'lib/dijit'
            },
            {
                name: 'dojox',
                location: 'lib/dojox'
            }
        ]
    }, 
    ["amdtest/Calendar"], 
    function(calendar) {
        console.log("done");
    });
</script>

To see an example where a "main" javascript resource is used see

http://[host]:[port]/filter_amdsamples/filter_amdcalendar-with-main.html 

Note: If you want to configure Dojo with the locale of the client you can use the localePlaceholder value to specify where the locale value is placed.

var dojoConfig = {
    locale : __localePlaceholder__
};

will result in this is the locale of the client is US english.

var dojoConfig = {
    locale : 'en-us'
};