DocsUpdated 24 Oct 2026

How to make JS and CSS bundles

Get higher ranked with fewer and smaller JS and CSS files. In other words, this means that you should always bundle all JS and CSS files to one JS-file and one CSS-file, and let Docly minify them for you (see the minify configuration below).

Minification

You no longer need to minify your files manually. Docly minifies the bundle for you when the site owner turns it on. Enable it per site in #/site.json:

{
  "minify": { "enabled": true, "js": true, "css": true, "html": false }
}

Minification runs when the bundle is rendered, and the result is cached, so each version of the bundle is minified once.

The mime type decides which minifier is used, and it is set with docly.setMime() in the bundle. Without setMime the type comes from the extension before .hash (bundle.css.hash is CSS, bundle.js.hash is JavaScript); a name without one is treated as HTML.

text/javascript (or application/javascript) -> JS minifier
text/css -> CSS minifier
text/html -> HTML minifier (controlled by the "html" flag, off by default)
Other types (JSON, XML, plain text) are never minified

The "js", "css" and "html" flags switch each type on/off. The "provider" setting ("zeta" or "nuglify") applies to HTML ONLY - JS and CSS always use NUglify.

Optional fine-tuning is passed to the minifier via "minify.settings":

"minify": {
  "enabled": true,
  "settings": { "css": { "CommentMode": "All" } }
}

Robustness: if the bundle has a syntax error, it is served UNMINIFIED and the error is logged - the site does not break. Check the log if a bundle does not appear to get smaller.

Compression and caching are automatic and require no configuration: the bundle is delivered with brotli/gzip and served from the site cache. There is no reason to pre-compress it yourself.

Make a JS bundle (Example)

Suggested name for your file: bundle.js.hash

#{
    docly.setMime("text/javascript");
    write(include("/#/root/assets/js/theme.core.min.js"));
    write(include("/#/root/assets/js/theme.min.js"));
    write(include("/#/root/assets/js/jquery.submitform.js"));
    write(include("/#/root/assets/js/jquery.editpage.js"));
    write(include("/#/root/assets/js/cookiealert.js"));
}#

How to use it:

<script src="#docly.assetUrl('/assets/js/bundle.js')#"></script>

Do not write ".hash" - Docly finds the file without it. docly.assetUrl() adds a ?v= stamp that changes on every publish, so browsers fetch the new bundle right away instead of using a cached copy - see Cache-busting bundles with assetUrl.

Make a CSS bundle (Example)

Suggested name for your file: bundle.css.hash

#{
    docly.setMime("text/css");
    write(include("/#/root/assets/css/theme.min.css"));
    write(include("/#/root/assets/css/cookiealert.min.css"));
}#

How to use it:

<link href="#docly.assetUrl('/assets/css/bundle.css')#" rel="stylesheet"/>