- Overview
- Transcript
4.4 Using an Alternative Module Loader
When deploying to production, we very often won’t need the full power and functionality of RequireJS. We can usually get away with using a much slimmer loader that can just load modules. We’ll take a look at using an alternative loader called almond.js.
Related Links
1.Introduction2 lessons, 06:55
1.1Introduction02:46
1.2What You Need04:09
2.RequireJS Basics4 lessons, 27:18
2.1Defining Modules07:25
2.2Exporting Values From Modules04:02
2.3The Main Script Entry Point06:55
2.4Specifying Configuration08:56
3.Handling Common Tasks5 lessons, 51:21
3.1Using Non-AMD Scripts With RequireJS06:31
3.2Using the Text Plugin09:35
3.3Wiring Up More of Our Modules10:40
3.4Localization With the I18N! Plugin12:10
3.5Adding More Functionality to the App12:25
4.Advanced4 lessons, 22:08
4.1Testing AMD Modules08:12
4.2Resolving Circular Dependencies03:41
4.3Using the r.js Optimizer06:53
4.4Using an Alternative Module Loader03:22
5.Conclusion1 lesson, 02:59
5.1Conclusion02:59
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.