$ dropoff

Packes and losslessly compresses all of scripts, stylesheets and images into one HTML file.

Useful for landing pages, when load time is especially important.

Requirements

Scripts, stylesheets and images must have inline property to be inlined:

<style src="js/main.js" inline />
<link rel="stylesheet" href="css/some-stylesheet.css" inline>
<img src="pizza.png" inline />  

All files have to be local resources, maximum file size that can be inlined is 8 KB (it can be changed with --max-size).

url() in stylesheets are automatically inlined, unless it's a font property (there are usually many font extensions included for browser compatibility, so inlining all of them is pointless).

Usage

npm i -g dropoff

and then

dropoff index.html dest.html

or just

npx dropoff index.html dest.html

$ dropoff --help

Usage:
  $ dropoff <entry> <output>
 
Description:
  Inlines and minifies JS, CSS and images.
 
Parameters:
  <entry>                 by default index.html
  <output>                by default dist.html
 
Options:
  -x, --max-size=<size>   Maximum size in KB of image that can be inlined. By default 8 KB.

API

Just install and import dropoff module and use it the same way as you would with CLI.

import dropoff from 'dropoff'
 
await dropoff('index.html', 'dest.html', { maxSize: 10 })

If you don't want to save .html set the second argument to null or leave it undefined:

const minifiedHtml = await dropoff('index.html', null, { maxSize: 10 })
//or
const minifiedHtml = await dropoff('index.html')

TypeScript is supported by default.

Acknowledgements

• Jason Yu for idea of asynchronous String.prototype.replace
• node-minify contributors
• svgo team for tool that optimizes SVG
• esm, jsdom, meow CLI helper, mime, url-regex

License

MIT