4.4 Using an Alternative Module Loader

Hey there, folks. In this final practical lesson, we're going to take a look at how we can use an alternative modulator for our deployments. In order to minimize the amount of JavaScript that visitors to our app need to download. RequireJS is pretty big. And contains a lot of code for features that we probably don't want to make use of in our production code. RequireJS defines a standard for AMD modules. So anyone is able to create different module loaders that can work with AMD modules. Regardless of how they were developed, as long as the modules conform to the AMD specification. We can therefore use a much smaller loader that doesn't contain all of the additional features provided by RequireJS. And just concentrates on loading modules, which can be useful if we're supporting mobile traffic. One such loader is called Almond, and this is what we'll be using today. Almond is tiny, and can be shrunk to just a single kilobyte. All we need to do is include it in our build package, and we don't need to include the full RequireJS source file. So let's grab ourselves a copy of Almond quickly. We can get it from GitHub. [BLANK_AUDIO] And let's save this in the external directory. [BLANK_AUDIO] To include Almond as part of our built distribution, we need to make a few changes to our build profile. [BLANK_AUDIO] First of all, we don't need to set the modules option now, so we can remove this. So we need to tell the optimizer to use Almond instead, which we can do with the name option. [BLANK_AUDIO] Strictly speaking, for our app, this is all we need to do. So let's run the build again. [BLANK_AUDIO] And we're just waiting for that to complete. So now that that's done, we just need to update the built index.html page. So we can set the script SRC. Instead of pointing to RequireJS, it can point to Almond. [BLANK_AUDIO] So let's now run the built index.html page once again. [BLANK_AUDIO] And this time, the only script file that's being loaded is the Almond file. And let's just open this up in our ID. [BLANK_AUDIO] And we can see that now, it's the Almond file which has all of our modules concatenated into it. So here's one of our views once again. So in this lesson, we looked at using an alternative modulator in place of RequireJS to avoid including a lot of functionality that we don't actually need in the built distribution of our app. We saw the basic configuration option that we need to set in our build profile. Although in this example, we had to update the name of the script file in the built HTML file manually. If we are using RJS as a build step, we could use Grunt, perhaps, or some other task runner. To easily replace this file name automatically after RJS has run. Thanks for watching.