Home > Developer > Web Develop
Requirejs is a JavaScript module loader. It is ideal for use in browsers, it is ideal for use in browsers, but it can also be used in other scripting environments, like Rhino and Node. Loading a modular script with Requirejs will increase the load speed and quality of your code.
This article for everyone to explain is Requirejs on the file merging and compression implementation method, interested in the classmate reference.
Requirejs provides a compression tool for packaging and compression tools r.js,r.js using UGLIFYJS for compression or closure Compiler. R.js Download
Requirejs merges and compresses the interdependent modules, js,css can be compressed, and even the entire project can be packaged. R.js is based on Nodejs, so a node environment is required on the native computer.
Here's a look at my entire project structure, as follows:
Now this is the case, app/a.js,app/b.js,app/c.js,app/d.js, there is a dependency, respectively, that a depends on b,b dependent on the c,c dependent on D, the import file App.js,
The code is as follows:
A.js
Define (["App/b"],function (b) {
return {
"Name": 1
}
});
B.js
Define (function (Require, exports, module) {
var c = require (' app/c ');
});
C.js
Define (function (Require, exports, module) {
var d = require (' app/d ');
});
D.js
Define (function (Require, exports, module) {
Alert (1);
});
App.js
Require ([' app/a '],function (JQ) {
});
If I do not compress and merge the code, then we look under the browser request as follows:
Now we step by step to explain the merger and compression bar!
A: Open cmd Command window, enter the project Requirejs, as follows:
Execute the command node r.js–o baseurl=js name=app out=build.js command, as shown above has been generated in the root directory build.js, we will look at the following directory structure as follows:
Let's look at the Build.js code again, as shown below:
Define ("app/d", ["require", "exports", "module"],function (e,t,n) {alert (1)}), define ("app/c", ["require", "exports", " Module "," APP/D "],function (e,t,n) {var r=e (" app/d ")}), define (" app/b ", [" require "," exports "," module "," APP/C "], function (e,t,n) {var r=e ("App/c")}), define ("app/a", ["app/b"],function (e) {return{name:1}}), require (["app/a"], Function (e) {}), define ("app", function () {});
The code for App.js,app/a.js,app/b.js,app/c.js,app/d.js has been merged and compressed.
Then we'll call the following in the index.html code:
<!doctype html>
<meta charset= "UTF-8" >
<title>Document</title>
<script src= "require.js" defer async= "true" data-main= "Build" ></script>
<body>
</body>
Loading directly from within the build.js, now let's look at the requests in the browser as shown below:
Now there are only 2 requests, and you can execute the code inside.
Here we explain the order separately:
-O: Indicates optimization, the parameter is fixed, required.
BASEURL: The root directory of the reference module, optional.
Name: The module's entry file, here is the app, then R.js will find the app.js from Baseurl+name, then find all the dependent modules, then merge and compress.
Out: Refers to the merged compressed output file path, here is the direct output in the root directory build.js we can also output to other directories such as Js/app directory, also can.
The above demo has been able to merge and compress the dependent modules, but it is not enough to meet our needs, because the code has been merged and compressed, for our modal code is not very convenient, so I would like to introduce you to the other 1 parameters:
1. Optimize (none/uglify/colsure), specifies whether to compress, default is uglify.
We can specify none, only merge does not compress. The code is as follows:
The command is as follows:
Node R.js–o baseurl=js name=app out=build.js optimize=none.
Now let's look at the Build.js file code as follows:
Now is all the JS file in a directory, that if the JS file under different folders? Is it possible to merge? Of course, as long as you specify the dependency on it, let's show it again. Join me now in the JS directory under the new file called App2, as follows:
Now in the APP2 directory to create a new JS file, if called E.js, then in the app directory d.js code to change to the following:
Define (function (Require, exports, module) {
var d = require (' app2/e ');
});
You can rely on the app2/e.js.
Let's run the following command again:
As you can see, E.js is also merged and compressed.
Above is the direct beat command, we can now also install R.js, installed as follows:
NPM install–g Requirejs
The installation is successful, as shown below.
In addition to providing parameter settings directly on the command line above, you can also write parameters to a file, assuming that the configuration name is Config.js,
The code is as follows:
({
BASEURL: "JS",
Name: "App",
Out: "App-built.js"
})
Then go to the appropriate directory and use R.js at the command line to run the Config.js file as follows: Command: node R.js-o config.js
Let's look at the resulting file app-built.js,
It is also possible to introduce this file on the page.
Requirejs file merging and compression implementation method
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
