pre-js v0.1.2
pre.js
Use pre.js to load your JS and CSS files efficiently. Perfect for mobile apps and sites where 3G can often fail.
- Petite: only 2.5kb gzipped.
- Resilient: Auto-retries downloads when they fail.
- Efficient: Downloads files in parallel.
Pre()
.retries(10)
.css('/assets/app.css')
.js('http://www.google.com/jsapi', function() { return window.google; })
.js('/assets/app.js', function() { return window.App; })
.then({
App.start();
});
Usage
Use index.min.js.
pre.js is available via bower and npm.
$ bower install --save pre-js
$ npm install --save pre-js
Recommended use
Create a file like load.js
, which contains pre.js and your loader code.
Use whatever build tool you prefer to do this for you. This gets you a small
<4kb
loader you can use as a "gateway" to the rest of your app.
With Webpack or Browserify, it probably will be like this:
/* load.js */
var Pre = require('pre-js');
Pre()
.css('/assets/app.css')
.js ('/assets/vendor.js', function() { return window.jQuery; })
.js ('/assets/app.js', function() { return window.App; })
.then({
App.start();
});
API reference
See pre.js's inline comments for more info. Here's a quick reference of the API:
Pre()
/*
* sets the maximum number of retries before giving up.
*/
.retries(10)
/*
* loads JavaScript assets. if the function returns a falsy value, it's
* assumed that the loading failed, and will try again.
*/
.js('/assets/jquery.js', function() { return window.jQuery; })
.js('http://www.google.com/jsapi', function() { return window.google; })
.js('/vendor.js', function() { return window.jQuery; })
.js('/app.js', function() { return window.App; })
/*
* defines callbacks to execute.
* these will run after the immediately-preceding `.js` or `.css` file is
* loaded. you can use as many .then() blocks as you like, inserted at
* different points.
*/
.then(function() {
google.api.load('maps');
App.start();
})
/*
* loads CSS files.
*/
.css('http://google.com/fonts?f=Roboto:300')
.css('/assets/application.css')
/*
* preloads assets (like images and fonts).
*/
.asset('/assets/image.jpg')
.asset('/assets/font.woff')
/*
* reports progress.
*/
.on('progress', function(e) {
document.getElementById('progress').style.width = '' + e.percent*100 + '%';
console.log("Loaded %s (%s of %s files loaded)", e.file, e.loaded, e.total);
})
/*
* reports retries and failures when they happen.
*/
.on('retry', function (e) {
console.warn("Failed to fetch %s, retrying", e.uri);
})
.on('fail', function (e) {
console.warn("Failed to load %s", e.uri);
})
/*
* Conditionals: runs the function block if `condition` is true.
*/
.if(condition, function (pre) {
pre.js('...');
})
Conditional loading
Simple:
Pre()
.js(window.JSON || 'json2.js',
function() { return window.JSON; })
.js(oldie ? 'jquery-1.9.js' : 'jquery-2.1.js',
function() { return window.jQuery; })
For more complicated things:
Pre()
.if(env === 'development', function (pre) {
pre
.js('livereload.js')
.js('weinre.js')
})
CoffeeScript
Better with CoffeeScript, if that's your thing:
Pre()
.css 'style.css'
.js 'jquery.js', -> jQuery?
.js 'app.js', -> App?
.then -> App.start()
Acknowledgements
pre.js © 2014, Rico Sta. Cruz. Released under the MIT License.
Includes code from yepnope.js, released under WTFPL. © 2012 Alex Sexton & Ralph Holzmann.
Authored and maintained by Rico Sta. Cruz with help from contributors.
- My website (ricostacruz.com)
- Github (@rstacruz)
- Twitter (@rstacruz)