How to use Require.js to manage multi-page site files (translation)

English version Address

When I recently used require.js, I found that it was really a good way to improve code management. I have mentioned Require before when I published the Backbone class, but I have never used Require in a traditional multi-page site before. The process of configuring Require in a multi-page site is cumbersome, so I want to organize the tutorials to help those who may encounter confusion.

Overview

Note that this article assumes that you are already familiar with require.js and basic configuration usage, and if not, it is recommended that you take a look at the official website manual first.

When creating a single page app (Single-page app), many people like to compile all the JS files into one file before publishing, which can reduce the intermittent HTTP request, the operation experience is more concise and more like the app, the same practice increases the level of the page at the first load.

When deploying a multi-page site, compiling and merging all files is not a good solution, because you cannot guarantee that users will be able to access each page, and the loaded files will have a lot of useless JS, which slows down the page rendering speed, the user experience becomes worse. For example, the user just visited the contact page, then it is necessary to the about page to use the JS to load it again?

The perfect scenario is that each page has its own main file to hold a specific page, plus a separate file (preferably cached) to hold the public Javascript library.

For example, you have a about page and a contact page, so you create a new mian-about.js and a main-contact.js, and assume that Mian-about and Main-contact both need jQuery and unde Rscore. At this point, it is not recommended to compile jquery and underscore into each main file, which will cause unnecessary duplication and bloat, we only use a new one containing jquery and underscore common.js and ensure that it is in the Mian-*.js file Before it can be loaded. The following table provides a deeper understanding:

Common.js

----------------

js/ Vendor/jquery.js

js/vendor/underscore.js

 

about

----------------

js/common.js

js/app/main-about.js

 

 

contact

----------------

js/common.js

js/app/main-contact.js

By merging those common JS files into Common.js, the HTTP request for each page is reduced, and the first page is loaded and common.js can be read directly from the browser cache. Let's look at one more example.

Example

James Burke, author of Requirejs, has done a lot of effective organizing code, using Requirejs Optimizer compression to optimize code, Some of the examples I often mention are: Example-multipage-shim.,example-multipage. But I prefer to use the shim version (which supports non-AMD-defined module loading) Requirejs because there seems to be a few non-AMD script files in a project.

If you're using Requirejs to create a single-page site, you might define your script tag like this:

<!-- This sets the BASEURL to the "Scripts" directory, and    loads a script that would have a module ID of ' main '  -<data-main= "scripts/main.js"  src= "scripts/ Require.js "></script>

Data-main properties can be conveniently used to set Requirejs BaseUrl property, usually you can also add some configuration in the main.js, for example, you want to load a third-party JS library, you want to create a path to reference. Because every single page in the template mian-* file is different, so we can put the configuration information in the Common.js:

1 //The build would-inline common dependencies into this file.2 3 Requirejs.config ({4BASEURL: './js ',5 paths: {6' jquery ': ' Vendor/jquery ',7' Bootstrap ': ' Vendor/bootstrap '8   },9 Shim: {Ten' Bootstrap ': [' jquery '] One   } A});

In addition to Common.js, I created the Basicmodel file under App/models to show that Common.js is public and put Basicmodel in Common.js.

Compile

Before compiling, you need to have a option.js to specify which files need to be compiled and which do not:

1Module.exports = {2Appdir: ' www ',3BASEURL: ' js/',4Mainconfigfile: ' Www/js/common.js ',5Dir: ' Www-release ',6 modules: [7     {8Name: ' Common ',9 include: [Ten' App/models/basicmodel ', One' jquery ', A' Bootstrap ' -       ] -     }, the     { -Name: ' App/main-about ', -Exclude: [' common '] -     }, +     { -Name: ' App/main-contact ', +Exclude: [' common '] A     } at   ] -};

In the above code, you first include all the files in the Include method, and then use the Exclude method to exclude the unwanted files. Requirejs the nested dependencies and excludes the files according to the exclude parameter configuration. Because Bootstrap has been compiled and merged into Common.js, it is not necessary to exclude out bootstrap for Main-about or main-contact alone.

Before you perform these operations, you need to perform a NPM installation. First you need to make sure that the Grunt tool is installed and the grunt command is compressed and packaged after the installation is complete. If the package is completed successfully, you will see a list of the following packaged files in Www-release/build.txt:

css/bootstrap-Responsive.css----------------css/bootstrap-Responsive.csscss/Bootstrap.css----------------css/Bootstrap.csscss/Style.css----------------css/Style.cssjs/Common.js----------------js/Common.jsjs/app/models/Basicmodel.jsjs/vendor/Bootstrap.jsjs/app/main-About.js----------------js/app/models/Aboutmodel.jsjs/app/main-About.jsjs/app/main-Contact.js----------------js/app/models/Contactmodel.jsjs/app/main-contact.js

Www-release/common.js inside tried a chunk of compressed code, the code contains Basicmodel, Bootstrap, JQuery, and initial configuration code. To configure about.html, you only need to load the files in the following order:

1 <Scriptsrc= "./js/vendor/require.js"></Script>2 <Scripttype= "Text/javascript">3 //Load Common code that includes config,4 //Then load the app logic for this page.5 require (['./js/common'], function(Common) {6   //./js/common.js sets the BASEURL to be./js/7   //You can ask for ' app/main-about ' here instead8   //of './js/app/main-about '9 require (['App/main-about']);Ten }); One </Script>

A clear and easy way to manage your code is achieved by introducing REQUIREJS-----common.js----main-about.js.

Thank you.

Front-end technical Articles translation QQ Group:338353879