Using the AMD Optimizer via Direct Injection

Using the AMD Optimizer via Direct Injection

Using the Optimizer via Direct Injection is the simplest way as it follows how other AMD loaders are configured and referenced. However, it should be understood that the level of optimization around browser caching is not as efficient as when the Optimizer is used via the HTML Filter or via JSP's. The AMD modules and their dependencies are directly injected into the page via single dynamic script tag insertion. Additional calls to the AMD async require method with result in additional dynamic script tag insertions. Again the referenced module(s) and their dependencies are included in the scripts source.

To use :

• Add a script tag to your HTML

  <script type="text/javascript" src="loader/amd/zazl.js"></script>

• Instantiate the loader via the zazl entry-point

    zazl({
        directInject: true,
        packages: [
            {
                name: 'dojo',
                location: 'lib/dojo'
            },
            {
                name: 'dijit',
                location: 'lib/dijit'
            },
            {
                name: 'dojox',
                location: 'lib/dojox'
            }
        ]
    }, 
    ["amdtest/Declarative", 'dojo/dom', 'dojo/dom-style'], 
    function(declarative, dom, domStyle) {
        domStyle.set(dom.byId("borderContainerTwo"), "visibility", "visible");
        console.log("done");
    });
  

Alternatively you can instantiate by providing a zazlConfig object and calling the global require entry-point

   var zazlConfig = {
        directInject: true,
        packages: [
            {
                name: 'dojo',
                location: 'lib/dojo'
            },
            {
                name: 'dijit',
                location: 'lib/dijit'
            },
            {
                name: 'dojox',
                location: 'lib/dojox'
            }
        ]
    };
    require(["amdtest/Declarative", 'dojo/dom', 'dojo/dom-style'], 
    function(declarative, dom, domStyle) {
        domStyle.set(dom.byId("borderContainerTwo"), "visibility", "visible");
        console.log("done");
    });