Packes and losslessly compresses all of scripts, stylesheets and images into one HTML file.
Useful for landing pages, when load time is especially important.
Scripts, stylesheets and images must have
inline property to be inlined:
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).
npm i -g dropoff
dropoff index.html dest.html
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.htmlOptions:-x, --max-size=<size> Maximum size in KB of image that can be inlined. By default 8 KB.
Just install and import
dropoff module and use it the same way as you would with CLI.
If you don't want to save .html set the second argument to
null or leave it undefined:
const minifiedHtml = await//orconst minifiedHtml = await
TypeScript is supported by default.
- 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