https://github.com/micmro/require-demo
Demo of using require in a multi-page app (a global and 0-n secondary entry files) structured with requireJS and optimized via r.js.
https://github.com/micmro/require-demo
Last synced: 6 months ago
JSON representation
Demo of using require in a multi-page app (a global and 0-n secondary entry files) structured with requireJS and optimized via r.js.
- Host: GitHub
- URL: https://github.com/micmro/require-demo
- Owner: micmro
- License: mit
- Created: 2014-10-18T21:31:41.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2014-10-30T15:59:30.000Z (over 11 years ago)
- Last Synced: 2024-12-29T18:21:01.354Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 270 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
require-demo
============
Demo of using require in a multi-page app (a global and 0-n secondary entry files).
Setup demo server and tools
---------------------------
If not already installer install [node.js](http://nodejs.org/) and execute the following repo in your teminal to install [Grunt](http://gruntjs.com/), the [r.js optimizer](http://requirejs.org/docs/optimization.html) and all dependencies:
``` Bash
npm install -g grunt-cli
npm install -g requirejs
npm install
```
You can start the demo server with `grunt dev`
Running the require optimizer
----------------------
``` Bash
r.js -o build.js
# or on windows (not bash)
r.js.cmd -o build.js
```
This will pack the dependencies as configured in build.js and outputs them to the `optim-output` directory
Performance optimization
----------------------
I've added a `onBuildWrite` step into the build configuration (`build.js`) that allows to load the optimized require module as a `` tag - this allows the preload-parser to start downloading the file earlier. So instead of nesting them in `require([], nextStage)` calls you can add them after each other in at the bottom of the document.
``` Javascript
({
...
onBuildWrite: function (moduleName, path, contents) {
// This is where the magic happens:
/// append ";require(["moduleName"]);" to all entry modules
// - this has the same result as adding insertRequire["moduleName"] to all modules
for (var i = 0, len = config.modules.length; i < len; i++) {
if(config.modules[i].name === moduleName){
return contents + ";require([\""+moduleName+"\"]);"
}
}
return contents
}
...
});
```
run the optimizer, commet out the require calls and uncomment these line both in `index.html`)
``` HTML
```