Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
FREELessons:16Length:1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.3 Using the r.js Optimizer

In this lesson we’ll take a look at the optimization tool r.js, which is designed to be used as part of a build process to concatenate and minify our modules.

Related Links

4.3 Using the r.js Optimizer

Hey folks. In this lesson we're going to look at another tool that we can run from the command line manually or as part of a build process automatically, r.js. Which is the optimizer for required js that concatenates all of our modules into a single file and minifies it, ready for deployment. Again, it runs on NodeJS, but it can also be used with Rhino, or even within the browser, although its functionality in the browser is limited. We'll run it on Node today. So let's create a new folder in the root of our project. We'll call it build. [BLANK_AUDIO] So, we need to download the optimizer separately to the RequireJS source file that we've been using so far. We've got a range of different options for installing it, even when just using Node. So, we can install it globally on our machines so that it's available in any project, or we can install it via MPM as a module local to the particular project. Or we can download it manually, which is what we're going to do today. We can obtain a copy from the required JS downloads page [BLANK_AUDIO] So we'll save this to the build directory that we just created. [BLANK_AUDIO] There are various different ways that we configure the optimizer, depending on what we want to do. In our situation, we want to concatenate our whole project, the modules, the views, everything. The only limitation is with our locale files. We can only include a single language bundle in our build. This doesn't mean that we can't support additional languages, it just means that additional languages will be loaded as separate modules as and when required. We can specify the default language if we want using the locale build option, but by default it will use the root language. We can use the optimizer to minify a single script or CSS file. And we have various options for development situations, but let's focus on building for deployment. We'll need to provide a new configuration, or build profile, for r.js so that it builds our package correctly. We should create a new script file also in the bill directory. We can call this one build.JS. Inside, we can provide a configuration object wrapped in parenthesis to supply the configuration. We'll cover the options that we need to achieve our aims here, but the fullest of options is available as an example build file on the required js site. So I'd recommend that you take a look at exactly what is available to use. Some of the configuration options that we can specify will be familiar from our regular required configuration, such as the base URL option, the parse option, shim, and more. But there are also a whole range of different configuration options specifically for the optimizer. The first option we should set is the appdir, which should map to the main directory that contains our application. In our case, this is the To Do Directory. [BLANK_AUDIO] The build profile is in the build directory, which is a direct descendant of the main app directory. So we can supply a relative path that points to the parent directory. Another option that we'll need to set is the base URL option. We need to set this for the optimizer, because otherwise, the optimizer will use the directory of the r.js itself as in as the base URL. And none of our modules will be able to find their dependencies. The base URL is relative to the directory specified as the apptor. Now we can specific the output directory for the build using the dir option. [BLANK_AUDIO] This option is relative to the build directory, which contains the build profile. We can just specify a new directory called dist. If this directory doesn't exist, which at this point it doesn't, the optimizer will create it for us automatically. We also need to tell r.js which of our modules is the main module which. Bootstraps the app, and loads in the other modules. In our case, this is the main JS file. [BLANK_AUDIO] Our main module will load all of our other modules. So this is what we need to specify. When the optimizer runs, this is the module that will have all of the modules concatenated into it. So as I said, we can specify a range of regular configuration options. And in our application, we've made use of some of these by the parse option especially. We could duplicate all of these options here in the build profile, but a better way would be to just use our configuration file. We can tell the optimizer to do this with the main config file option. [BLANK_AUDIO] Great. So this should be all that we need to do. So let's fire up a command prompt and cd into the build directory. [BLANK_AUDIO] And now we can build with this command. [BLANK_AUDIO] So we should see some feedback in the console as to what's happening. And after a short while the process should complete successfully. So let's go back to the IDE now. And as you can see we now have a dist folder. And this replicates the structure of our app folder, so let's go into SRC now and if we open up the main JS script, we find that this now contains all of our other modules as well as some of the external files that we're using. Here you can see there is one of our views, the article that contains the entire app is shown there. So if we now run the index dot html that is in the dist folder, let's just open up the console, and if we go to the network tab. Then when we refresh the page again, we can see that this time only three script files are being loaded. Let's just go back and run the regular, unbuilt index file. And let's take a look at the network activity here. And we can see that all of our modules are being loaded individually. So when we build, it drastically cuts down the number of HTTP requests that the page needs to make. So in this lesson we looked at the r,js optimizer that we can use to generate a single minified file that contains all of our modules concatenated together. We saw how to create a build profile to configure the build, and how to run the optimizer using Node. Thanks for watching.

Back to the top