Pack all frontend assets of a single page app into a single ball.
ballify bundles all assets that are linked into a
HTML file and concatenates them into one big ball, yet another
HTML file (
brotli-compressed by default). It packs scripts (empty ones with no innerText/code), stylesheets, images (
svg), and Google Fonts (loaded via a
link element). Assets can be read from local or remote sources.
ballify is designed to be used with single page apps that are built with ordinary web technologies and do not require toooo many frontend assets.
For programmatic usage do:
npm install --save-dev ballify
Install it globally if you are gonna use the command line interface:
npm install --global ballify
Simply bundle up all assets that are linked into
index.html and write that to
ballify index.html -o ball.html.br
Ballify your single page app and spin up a local devserver @
ballify index.html --live
You can set all options from the command line. Make sure 2 check out
var ballify =
The ball is
brotli-compressed by default. Set
false to prevent compression, see below.
ballify(file[, opts], callback)
HTML file. The callback has the signature
callback(err, ball), with the ball being a buffer. Options default to:
brotli: true // compress the ball with brotli?gzip: false // gzip the ball?base64Images: true // convert image references to base64 data uris?base64GoogleFonts: true // convert Google Font links to base64 inline fonts?minifyCSS: true // remove unnecessary whitespace from CSS?mergeCSS: true // merge recurring selectors within CSS?crunchHTML: true // remove unnecessary whitespace from HTML?
opts.gzip as mutually exclusive, meaning you can either use one or the other but not both.
true image urls are converted to base64 data uris within
JS files. Google Fonts are only converted to inline fonts if they are loaded via an ordinary
To keep things simple. To serve all frontend assets in one response.
Go ahead and use
ballify if you are into single page apps and ready to ball up!.