R.js optimized Front End (excerpt)

R.js is the Requirejs optimization (Optimizer) tool, which enables the compression and merging of front-end files, further provides front-end optimization on the basis of Requirejs asynchronous on-demand loading, reduces the front-end file size, and reduces file requests to the server.
To use r.js you need to download the R.js file (click I download), place it in your project root directory, and install Nodejs (click I download) to perform the R.js function from the command line.
We'll take a small case to detail how to use R.js (you can download this case here).

The project shown (see the Before folder in the case) uses only Requirejs, but R.js has not been used. The project has two pages, where index.html uses jquery and I wrote a JQ slideshow plugin vajoyjs, and another page reg.html uses the AVALONJS framework.

We open the index.html and reg.html two files, from the introduction of Data-main information in the Requirejs tag, you can know that their entry files are js/pages and index.js in the Reg.js directory, respectively.

So we open the Js/pages directory under the Index.js and reg.js files, look at their configuration code:

⑴index.js:

Require.config ({    paths: {    ///relative to the path of this JS file        jquery: '. /common/jq ',        VJ: '. /common/vajoyjs '    }}); require ([' jquery '], function ($) {    $ ("#outside2"). HTML ("Below is a slide");}); Require ([' jquery ', ' VJ '], function ($,VJ) {    VJ ($ ("#outside")). Slidefade ("LI_DF", "Li_ac", "Arrow_left", "Arrow_ Right ");});

⑵reg.js:

Require.config ({    paths: {    //relative to the path of this JS file        Avalon: '. /common/avalon '    }}); Require ([' Avalon '], function () {    var reg = Avalon.define ("Reg", function (VM) {         Vm.username = "";    })});

Here we naturally think of a slightly troublesome thing, that is, every portal file to configure the Require.config, such as 10 pages to rely on jquery, the corresponding 10 entry file may be written:

Require.config ({    paths: {    ///relative to the path of this JS file        jquery: '. /COMMON/JQ '        //,others ...    }});

Nature is a rather cumbersome thing, then there is no way to all the page Entry file config information are concentrated together once processing can?
R.js can help you do that.

We can first drastically remove the Require.config ({...}) from the two entry files, such as the above-mentioned index.js just keep:

View Code

Then we put the R.js file to the project root directory, and then the root directory to create a new Build.js file, the file content is as follows:

({     appdir: './',//   project root    dir: './vajoy ',  //Output directory, folder to be placed after all files are packaged (if not created automatically)        baseUrl: './js/ Pages ',   //relative to Appdir, representing the starting folder to find the JS file, all the file paths defined below are based on this baseurl        modules: [                      //module to be optimized      {name: ' index ' }, {name: ' reg '}    //White is the entry file for each page, relative BaseURL path, is also omitted suffix ". js"    ,        fileexclusionregexp:/^ (r|build) \.js|. *\.scss$/,    //filter, matching to the file will not be output to the output directory to        optimizecss: ' Standard ',         removecombined:true,   //If True, The merged files will be removed from the output directory        paths: {    //relative BaseURL path            Avalon: '. /common/avalon ',            jquery: '. /common/jq ',            VJ: '. /common/vajoyjs '    }    //     , shim:{...}      

The meaning of each parameter I found a note on the Internet (recommended to be interpreted with the comments on my Code):

Then the most important step is to open the node. js command prompt into the node commands line interface and navigate to the project directory:

and then type

and enter to run the R.js optimizer. Then open the project directory, you will find a new Vajoy folder, r.js the optimized, compressed all the project files are copied to this file:

Since then we have done all the work of r.js (it is very simple, right ~)

The two points to know here is that the Vajoy folder is the file name that we fill in the "dir" project in Build.js, R.js will automatically put the final optimized project files here, while the original files will not be modified.

Another thing to know is that we set up the build.js in the

Fileexclusionregexp:/^ (r|build) \.js|. *\.scss$/

It tells R.js not to put the matching file into the Dir-defined folder (Vajoy folder), we look at this regular, it matches the r.js, Build.js, and all the. scss suffix files.

And you can see that there are no files in the Vajoy folder that are matched to. You can follow the requirements to see which files are ultimately not received in the project, thus writing the appropriate regular expressions.

What did R.js do?

Although we know that R.js can help us write less require.config, we can also help us discard unnecessary files in the final project, but this is not the main purpose of using it.

We can open the case in the before and after directory of the index.html, see the use of r.js before and after the file on the server's request to send a change:

As you can see, r.js the script needed to index.html the page into the portal file Index.js, reducing the request to the server.

In addition, the style file will be compressed under the r.js operation, thus reducing the file size effectively:

Hope this tutorial can help you better use r.js, mutual encouragement ~

R.js optimized Front End (excerpt)