Minification

Besides your JS and CSS bundles, you still have the HTML output and its embedded CSS/JS to take care of.

HTML template literals are leaved as-is with Gracile, this is because HTML minification is a tedious process that requires awareness about potential issues.

It’s not always worth the trouble to do it, but if you want to squeeze as many bits as possible, you have multiple options.

For example, you can use the @literals/rollup-plugin-html-css-minifier Rollup plugin.

npm i @literals/rollup-plugin-html-css-minifier

📄 ./vite.config.ts

import { defineConfigfunction defineConfig(config: UserConfig): UserConfig (+3 overloads)Type helper to make it easier to use vite.config.ts
accepts a direct
{@link
UserConfig
}
object, or a function that returns it.
The function receives a
{@link
ConfigEnv
}
object., type PluginOptiontype PluginOption = false | Plugin<any> | PluginOption[] | Promise<false | Plugin<any> | PluginOption[] | null | undefined> | null | undefined } from 'vite';
import { literalsHtmlCssMinifierfunction literalsHtmlCssMinifier(options?: Options): Plugin & {
    transform: TransformHook;
} } from '@literals/rollup-plugin-html-css-minifier';
import { gracileconst gracile: (config?: GracileConfig) => any[]The main Vite plugin for loading the Gracile framework.
@paramconfig - Gracile configuration.@returnsVite plugins. `any` is used to prevent Vite typings version mismatches for the plugin API.@example`/vite.config.js`
```js
import { gracile } from '@gracile/gracile/plugin';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		gracile({ output: 'server' }),
	],
});
``` } from '@gracile/gracile/plugin';

export default defineConfigfunction defineConfig(config: UserConfig): UserConfig (+3 overloads)Type helper to make it easier to use vite.config.ts
accepts a direct
{@link
UserConfig
}
object, or a function that returns it.
The function receives a
{@link
ConfigEnv
}
object.({
  // ...
  pluginsUserConfig.plugins?: PluginOption[] | undefinedArray of vite plugins to use.: [
    gracilefunction gracile(config?: GracileConfig | undefined): any[]The main Vite plugin for loading the Gracile framework.
@paramconfig - Gracile configuration.@returnsVite plugins. `any` is used to prevent Vite typings version mismatches for the plugin API.@example`/vite.config.js`
```js
import { gracile } from '@gracile/gracile/plugin';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		gracile({ output: 'server' }),
	],
});
```(),
    // ...
    literalsHtmlCssMinifierfunction literalsHtmlCssMinifier(options?: Options): Plugin<any> & {
    transform: TransformHook;
}({
      optionsOptions.options?: Partial<Options> | undefinedMinify options, see
https://www.npmjs.com/package/minify-html-literals#options.: {
        // ...
      },
    }),
  ],
});

The static HTML pre-renders and html templates in JS will then be properly minified.
It works during development and build, for the client and the server bundles.