Login

How to make JS and CSS bundles Last updated: 15. Jul 2026

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:

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

Requirement: "cache" MUST be enabled. Minification only runs when the page is rendered (on a cache-miss) and the result is cached - otherwise every single request would pay the cost of minifying again.

The mime type decides which minifier is used, and it is set with docly.setMime() in the bundle. Without setMime the file 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="/assets/js/bundle.js"></script>

Note that you do not need and should not write ".hash" - Docly will find the file without it.

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="/assets/css/bundle.css" rel="stylesheet"/>

Note that you do not need and should not write ".hash" - Docly will find the file without it.