Code optimization with RequireJS: how it is done and why it is needed

In my previous post, I talked about how to connect RequireJS to my project. In addition, he promised to talk about optimization. Optimizing projects built on RequireJS is very fast and easy. Moreover, the code itself (scripts, libraries, plug-ins) and style files are optimized.

To demonstrate the requirements for RequireJS code optimization, I created a simple one-page project. The main page displays a list of users. Clicking on the user gets to the page with information about him. Users are divided into two types - regular and administrators, and their pages differ in both content and design.

To accomplish this task, I, as always, used the Backbone library and, of course, RequireJS. At what I ended up with, you can see here .

How it's done

Connection RequireJS problems should arise. The main thing is to describe the configuration correctly (application.js file):
')

requirejs.config({ baseUrl: "js/library", paths: { jquery: 'jquery.min', backbone: 'backbone.min', underscore: 'underscore.min', domready: 'domReady', appControllers: '../Controllers', appModels: '../Models', appViews: '../Views' }, shim: { 'underscore': { exports: '_' }, 'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' } } }); 

Immediately I want to answer the question: why connect Backbone in the shim block? The answer is very simple. The version of the Backbone and underscore libraries that I use does not support AMD . Therefore, they must be added to the shim block. But you can download versions with AMD support and quietly use Backbone without additional settings RequireJS.

The project is ready and we can begin to optimize it. To do this, you must perform several steps.

1. On the official website download and install Node. It is required to run the optimization script.
2. Download the r.js optimization script . Create a separate folder optimization in the root of our project and put this script there.
3. In the optimization folder, we create files with optimization settings for scripts (file build_scripts.js) and styles (build_css.js). There are a lot of settings. Full list of them is here . These settings can also be set as command line parameters directly when the optimization script is run. But I decided to save them in files. First, it is more convenient when editing. Secondly, the command line parameters have limitations in syntax. Namely - the point is interpreted as a separator for the properties of objects. Therefore, the record type
   
   

    paths.core/jquery.tabs=empty: 

   
   will match the configuration
   
   

    paths: { 'core/jquery': { tabs: 'empty:' } } 

   
   but not
   
   

    paths: { 'core/jquery.tabs': 'empty:' } } 

   
   

All is ready. Now just run the optimization script. Go to the console and execute the command:

 node r.js -o build_scripts.js 

Got an optimized script file application-build.js .

Now let's optimize our style files. It is not so easy as with scripts. The project uses four style files:

• application.css
• adminpage.css
• userpage.css
• bootstrap.min.css

In order to merge them into one, let's do this: import the other three files into the application.css file:

 @import url("bootstrap.min.css"); @import url("userpage.css"); @import url("adminpage.css"); 

Perform optimization:

 node r.js -o build_css.js 

Received the file application-built.css . And now let's check the result by connecting our optimized files to the project.

 <link href="css/application-built.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="application-built.js"></script> 

As you can see everything works. By the way, this is the line in the configuration file

 include: ["requireLib"], 

allows us to use an optimized script file separately, without RequireJS. Otherwise, the optimized script would connect like this:

 <script data-main="js/application-built" src="js/library/require.js"></script> 

What is it for

Optimization helps speed up the loading of scripts, which in turn improves the speed of the site as a whole. But how do you know if a project really needs optimization? Maybe everything is already working fast enough, and nothing can be improved? The answer to this question will give you YSlow .

YSlow is a Mozilla Firefox browser extension developed by Yahoo. It can measure the speed of loading pages, and also conducts a fairly detailed analysis of their individual components. One of the points in the analysis is the need to optimize the code. YSlow does not work independently, but as part of the Firebug extension.