Require.js implementation of JS Modular Programming (ii): Requirejs Optimizer

Require.js implementation of JS Modular Programming (ii): Requirejs Optimizer

In this section, we mainly study the use of an optimization tool r.js provided by Require.js.

1, know Requirejs Optimizer
Requirejs Optimizer is the optimization of the script to support the current popular UGLIFYJS and Closure Compiler Two compression methods, UGLIFYJS need NodeJS environment support, and Closure Compiler need Java ring Border. This article is optimized with UGLIFYJS running on NodeJS, which is also the default compression method for Requirejs Optimizer.

2. Environmental requirements and operating methods
First, you need to install Node 0.4.0 or later, and then download r.js, download it and then you can optimize the front-end code on the command line.
R.js parameters are passed using the method:
One is directly behind the command line, as follows:

Node R.js-o baseurl=. Paths.jquery=some/other/jquery Name=main Out=main-built.js

The second is to create a new configuration file, such as Build.js (recommended in this way), so that the configuration is more convenient, as follows:

Node R.js-o build.js

3. Project structure and Build.js configuration

As follows:

({    baseUrl: ".",    Name: "Main",    //dir: "dist/",   //The path of the output directory.) If not set, the default is the build directory with the build file sibling.    optimize: "Uglify",  //javascript code optimization method    optimizecss: "Standard.keeplines",  //css Code optimization method    // Mainconfigfile: "Main.js",    //removecombined:true,    //fileexclusionregexp:/^\./,    //modules:[{}],  //Define an array of modules to be optimized.    paths: {        "common": "./libs/common",        "Countobject": "./core/countobject",        "Dependcount": "./ Core/dependcount ",        " countfunction ":"./core/countfunction ",        " Dateutil ":"./core/dateutil ",        " Stringutil ":"./core/stringutil "    },    shim: {        dateutil: {            deps: [],            exports: ' Dateutils '        },        stringutil: {            deps: [],            exports: ' StringUtils '        }    }, out    : './dist/ Main-built.js "   //merge compression after JS directory})

Follow the Build.js configuration file and run node R.js-o build.js with the following effects:

After the merge is generated, the compressed file is located in/dist/main-built.js, which is introduced in the Index.html page, as follows:

<script src= "Js/libs/require.js" data-main= "js/dist/main-built"  defer async= "true" ></script>

Build.js Basic Parameter Introduction

• Appdir

The top-level directory of the application. Optionally, if set, R.js will assume that the script is in a subdirectory of this path and that the application's files are copied to the output directory (the path defined by dir). If not set, the following BASEURL path is used.

• BaseUrl

By default, all modules are relative to this path. If not set, the module is loaded relative to the directory where the build file resides. In addition, if Appdir is set, the BASEURL should be defined as a path relative to Appdir.

• Dir

The path to the output directory. If not set, the default is the build directory with the build file sibling.

• Optimize

How JavaScript code is optimized. Values that can be set:

• • "Uglify: Use UGLIFYJS compression code, default value;
  • "Uglify2": Use the 2.1.2+ version to compress;
  • "Closure": Use Google's closure Compiler to compress and merge, need the Java environment;
  • "Closure.keeplines": Compress merge with closure Compiler and keep line wrapping;
  • "None": Do not compress merge;
• Optimizecss

CSS code optimization methods, the optional values are:

"Standard": standardized compression method;
"Standard.keeplines": Keep line break;
"Standard.keepcomments": Keep annotations;
"Standard.keepComments.keepLines": Keep line break;
"None": no compression;

• Mainconfigfile

If you do not want to repeat the definition, you can use this parameter to configure the Requirejs configuration file path.

• removecombined

Delete the merged file before compressing it, the default value is False.

• Fileexclusionregexp

An expression that matches the regular match of the file to be excluded.

• Modules

Defines an array of modules to be optimized. Each item is a module-optimized configuration, and several commonly used parameters are as follows:

1. Name: module name;
2. Create: If it does not exist, whether it is created. Default false;
3. Include: additional modules introduced, combined with the module defined by name, are compressed together;
4. Exclude: The module to exclude. Some modules have public dependency modules, each of which is compressed when combined, such as some base libraries. Using exclude, these modules can be compressed in a module that was loaded earlier, and other modules do not have to be introduced repeatedly.

Requirejs Optimizer configuration Parameters There are many, complete parameter introduction can be seen here.

4, Main.js

Require ([' _main_ ']);d efine ("_main_", ["Common", "Countobject", "Countfunction", "Dependcount", "Dateutil", " Stringutil "], function (Common, countobject, countfunction, Dependcount, Dateutil, stringutil) {    Stringutil.touppercase ();    Dateutil.tostring ();    Window. Stringutils.touppercase ();    Window. Dateutils.tostring ();});

5. batch processing file Start.bat
If you do not want to enter node R.js-o build.js each time to package compression, you can define such a batch file Start.bat, note the path to change the file. Double-click the file to package yourself for batch processing.

@echo Offecho build...e:cd E:\ownstudy\require\requirejs_Demo_r\js node R.js-o build.js Echo Press any key to Exit!echo. & Pause

Requirejs Optimizer project address, please download yourself, thank you for your attention.

Require.js implementation of JS Modular Programming (ii): Requirejs Optimizer