Home > Developer > Web Develop
To cope with the increasingly complex, large-scale development of JavaScript. We piecemeal and simplify. The complex logic is divided into small units, conquer. At this time a project may have dozens of or even hundreds of JS files, each file is a module unit. If these are small files on-line, that will have a certain impact on performance.
REQUIREJS provides a packaged compression tool r.js to merge and compress modules. R.js is very powerful and can not only compress js,css, but even package the entire project.
The R.js compression tool uses UGLIFYJS or closure Compiler. UGLIFYJS is used by default (jquery also uses it for compression). In addition, R.js requires the node. JS environment, and of course it can also run in Java environments such as Rhino.
This article takes a simple example to feel the next r.js, creating the following directory
And the three directory structure of the entry, wrote three module cache,event,selector. The code for these three modules is not posted. Main.js also did not make changes, the implementation of the function is still the page all the paragraph P element to add a click event, click to eject P innerHTML. The only difference is that there is more than one r.jsin the directory.
Index.html made the changes, as follows
<!DOCTYPE HTML><HTML> <Head> <title>Requirejs Advanced (i)</title> <MetaCharSet= "Utf-8"/> <styletype= "Text/css">P{background:#999;width:200px; } </style> </Head> <Body> <P>P1</P><P>P2</P><P>P3</P><P>P4</P><P>P5</P> <ScriptData-main= "Built"src= "Require.js"></Script> </Body></HTML>
Note thatData-main changed to "built"and the previous article was "main". We will use R.js to merge the cache.js,event.js,selector.js,main.js in the JS directory and write to the R4 directory.
OK, let's start merging compression.
1. Open Windows Command window, CD to R4 directory
2, enter command
Node R.js-o baseurl=js name=main out=built.js
command-line information can see that the individual JS files have been merged successfully. At this point back to the R4 directory will find a more than one built.js file.
OK, the merge compression process is complete.
Place the directory R4 on Apache or another Web server and access the index.html. Network requests are as follows
can see except Require.js, only built.js. Greatly reduces the HTTP request of the JS file. When you click on each P element on the page, the corresponding innerHTML will pop up.
This means that the function is complete.
Here is a brief explanation of the command line.
Node R.js-o baseurl=js name=main out=built.js
-O means optimization, which is fixed and required.
BaseUrl refers to the root directory of the storage module, here is R4/JS, because the CD into the R4, just set to JS. Optional, if not set, the main.js will be looked up from R4.
The entry file of the name module, which is set to "main", then R.js will be looked up from Baseurl+main. This is actually r4/js/main.js. R.js analyzes the main.js, finds all the other modules it relies on, and then merges the compression.
Out refers to the file path of the merged compressed output, which is directly built.js, then output to the root directory r4.
All right, here's two more parameters.
1,excludeshallow will exclude this file when merging
Node R.js-o baseurl=js name=main out=built.js excludeshallow=selector
You can see that selector.js is no longer included in the output information. Then run the index.html page, you will find that Selector.js was requested separately.
2,optimize (none/uglify/closure) specifies whether to compress, default is Uglify
R.js default to UGLIFYJS compression when this parameter is not passed. Set to none is not compressed and merges only, which is useful in the development phase.
Node R.js-o baseurl=js name=main out=built.js optimize=none
The generated built.js is not compressed at this time.
Summarize:
This article demonstrates a small example of using a module before it goes live: Merging all the module files into one file.
Download R.js to the development directory and use the command line to merge the compression. It demonstrates the use of command-line arguments-O, BASEURL, name, out, and Excludeshallow, optimize. -O, name, out are required, and others are optional.
DownloadRequirejs Advanced (i)
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
