@zokki/astro-minify

This package helps you minify HTML, CSS, and SVG files within your static Astro site, resulting in a smaller bundle size and potentially faster loading times.

Note

astro-minify only for statically generated build and pre-rendered routes.

Why

I created this package because I needed a comprehensive solution for minifying Astro static sites. While there were separate plugins for minifying HTML, CSS, and SVGs, I wanted an all-in-one solution that would:

1. Handle HTML, CSS, and SVG minification in a single package
2. Specifically handle Astro's client-id (CID) minification, which can significantly reduce file sizes
3. Provide a simple, configurable interface for all minification needs

This package combines the power of multiple minification tools (@minify-html/node, lightningcss, svgo) and adds custom CID minification to create a complete optimization solution for Astro static sites.

Installation

1. Install with npm.

   npm install @zokki/astro-minify
   

2. Import into the astro-config. The integration should be below most of the other integrations.

   import { minify } from '@zokki/astro-minify';
   
   export default defineConfig({
   	integrations: [minify()],
   });
   

Configuration

/**
 * Toggle logging of all minified files
 *
 * @default
 * true
 */
logAllFiles?: boolean;

/**
 * Config for `@minify-html/node` or `false` to disable html minification
 *
 * @default
 * {
 * 	minify_css: true,
 * 	minify_js: true,
 * 	keep_comments: false,
 * 	keep_ssi_comments: false,
 * 	keep_closing_tags: true
 * }
 */
html?: false | MinifyHtmlConfig;

/**
 * Config for `lightningcss` or `false` to disable css minification
 *
 * @default
 * { minify: true }
 */
css?: false | LightningcssConfig;

/**
 * Config for `svgo` or `false` to disable svg minification
 *
 * @default
 * {
 * 	multipass: true,
 * 	plugins: [
 * 		{
 * 			name: 'preset-default',
 * 			params: {
 * 				overrides: {
 * 					// disable a default plugin
 * 					cleanupIds: false,
 * 					removeHiddenElems: false,
 * 					removeEmptyContainers: false,
 * 				},
 * 			},
 * 		},
 * 	],
 * }
 */
svg?: false | SvgoConfig;

/**
 * Config for cids-replacement or `false` to disable svg minification
 *
 * @default
 * {
 * 	prefix: 's-',
 * 	cidRegex: /data-astro-cid-[a-zA-Z0-9]{7,10}/g,
 * 	extensions: ['html', 'css']
 * }
 */
minifyCid?: false | MinifyCidConfig;

License

MIT © Tim-Niclas Oelschläger