Custom Module - Automatic CSS and JS Minification + Cache-Busting for static files (NodeJS)

Wappler Extensions
,
1

I’m excited to share a new Wappler extension I’ve just released: @guptast/wappler-cache-buster-minify - an enhanced version of @ben's excellent wappler-cache-buster module.

This extension builds directly on Ben’s original work, adding automatic CSS and JavaScript minification while keeping all the strengths of his cache‑busting system. A huge thank‑you to Ben for his support, guidance, and help throughout the refinement and publishing process. This release truly wouldn’t have been possible without his foundation and encouragement.

:white_check_mark: What This Extension Does

This module provides:

  • Automatic CSS & JS Minification Minifies files on‑the‑fly using clean-css and uglify-js.
  • Smart Caching & Re‑minification Only re‑minifies when the source file changes.
  • Cache Busting Appends timestamps to ensure browsers always load the latest version.
  • Manual Installation : Full control over extension setup and file placement.
  • Zero Configuration Works immediately once installed.
  • Fallback Safety If a file is missing or minification fails, the original file is served without breaking your site.
  • Production‑Ready Performance Minimal overhead after the first minification pass.

This gives Wappler developers a simple, reliable way to improve performance and avoid stale assets.

:white_check_mark: How to Install

Full installation instructions are available on the npm package page:

https://www.npmjs.com/package/@guptast/wappler-cache-buster-minify

You can also install it directly inside Wappler:

Project Options → Extensions → + (Add Extension) → search for @guptast/wappler-cache-buster-minify

Wappler will automatically download and register the extension for you.

After installation, create the loader file at the level

extensions/server_connect/routes/cache-minify-loader.js

with the following content:

/**
 * Cache Minify Module Loader
 */
module.exports = require('@guptast/wappler-cache-buster-minify').loader;

Restart Wappler to activate the extension.

:white_check_mark: Usage Example (EJS Templates)

<link rel="stylesheet" href="<%=minify('/css/style.css')%>">
<link rel="stylesheet" href="<%=minify('/css/components.css')%>">

<script src="<%=minify('/js/app.js')%>"></script>
<script src="<%=minify('/js/utils.js')%>"></script>

Example output:

/css/style.min.css?v=1702324004815
/js/app.min.js?v=1702324004815

:white_check_mark: Why Minification Matters

Ben shared an excellent breakdown of the benefits of minifying CSS and JS, which can be summarised as follows:

  • Faster load times - smaller files download and render more quickly
  • Lower bandwidth usage - especially helpful for mobile users
  • Better server efficiency - less data to serve per request
  • Improved SEO - search engines reward faster sites
  • Reduced bounce rates - users stay longer when pages load instantly
  • Cleaner production code - unnecessary whitespace, comments, and long variable names are removed
  • Works well with caching & compression - combining minification with gzip/brotli and cache busting maximises performance

Minification is a simple but powerful optimisation that improves speed, efficiency, and user experience. This is especially useful for Wappler SPA projects where performance and caching are critical. My hope is that it becomes a helpful tool for improving performance and simplifying asset management in your projects.

Once again, thank you to Ben for the original cache‑buster module and for all his support in helping me bring this enhanced version to life.

If you try it out, I’d love to hear your feedback or suggestions for future improvements.

8 Likes
2

Have tried this, tested it and am now utilizing it on my projects. A very worthwhile extension. Thank you so much :heart:.

1 Like