HTML minification

.changeset/tiny-snails-dance.md

@@ -0,0 +1,5 @@
+---
+'astro': minor
+---
+
+minification the HTML

packages/astro/src/@types/astro.ts

@@ -462,6 +462,24 @@ export interface AstroUserConfig {
 	 */
 	site?: string;
 
+
+	/**
+	 * @docs
+	 * @name compressHTML
+	 * @type {boolean}
+	 * @default `true`
+	 * @description
+	 * Astro removes all whitespace from your final HTML file, including line breaks, by default. This is useful for reducing the size of your final build's HTML bundle. 
+	 * To disable this, set the `compressHTML` flag to `false`.
+	 *
+	 * ```js
+	 * {
+	 *   compressHTML: false
+	 * }
+	 * ```
+	 */
+	compressHTML?: boolean;
+
 	/**
 	 * @docs
 	 * @name base

packages/astro/src/core/compile/compile.ts

@@ -37,6 +37,7 @@ export async function compile({
 		// use `sourcemap: "both"` so that sourcemap is included in the code
 		// result passed to esbuild, but also available in the catch handler.
 		transformResult = await transform(source, {
+			compact: astroConfig.compressHTML,
 			filename,
 			normalizedFilename: normalizeFilename(filename, astroConfig.root),
 			sourcemap: 'both',

packages/astro/src/core/config/schema.ts

@@ -23,6 +23,7 @@ const ASTRO_CONFIG_DEFAULTS: AstroUserConfig & any = {
 		assets: '_astro',
 		serverEntry: 'entry.mjs',
 	},
+	compressHTML: false,
 	server: {
 		host: false,
 		port: 3000,
@@ -70,6 +71,7 @@ export const AstroConfigSchema = z.object({
 		.default(ASTRO_CONFIG_DEFAULTS.cacheDir)
 		.transform((val) => new URL(val)),
 	site: z.string().url().optional(),
+	compressHTML: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.compressHTML),
 	base: z.string().optional().default(ASTRO_CONFIG_DEFAULTS.base),
 	trailingSlash: z
 		.union([z.literal('always'), z.literal('never'), z.literal('ignore')])
@@ -218,6 +220,10 @@ export function createRelativeSchema(cmd: string, fileProtocolRoot: URL) {
 			.string()
 			.default(ASTRO_CONFIG_DEFAULTS.srcDir)
 			.transform((val) => new URL(appendForwardSlash(val), fileProtocolRoot)),
+		compressHTML: z
+			.boolean()
+			.optional()
+			.default(ASTRO_CONFIG_DEFAULTS.compressHTML),
 		publicDir: z
 			.string()
 			.default(ASTRO_CONFIG_DEFAULTS.publicDir)

packages/astro/src/runtime/server/render/page.ts

@@ -79,7 +79,6 @@ export async function renderPage(
 		result._metadata.headInTree =
 			result.componentMetadata.get((componentFactory as any).moduleId)?.containsHead ?? false;
 		const pageProps: Record<string, any> = { ...(props ?? {}), 'server:root': true };
-
 		let output: ComponentIterable;
 		let head = '';
 		try {

packages/astro/test/astro-minification-html.test.js

@@ -0,0 +1,42 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture, isWindows } from './test-utils.js';
+
+describe('minification html', () => {
+	describe('in the dev', () => {
+		let fixture;
+		let devServer;
+		const regex = /[\r\n]+/gm;
+		before(async () => {
+			fixture = await loadFixture({
+				root: './fixtures/minification-html/',
+			});
+			devServer = await fixture.startDevServer();
+		});
+
+		after(async () => {
+			devServer.stop();
+		});
+
+		it('Verify that the HTML code is compressed in the dev', async () => {
+			let res = await fixture.fetch(`/`);
+			expect(res.status).to.equal(200);
+			const html = await res.text();
+			expect(regex.test(html.slice(-100))).to.equal(false);
+		});
+
+	})
+	describe('build', () => {
+		let fixture;
+		const regex = /[\r\n]+/gm;
+		before(async () => {
+			fixture = await loadFixture({ root: './fixtures/minification-html/' });
+			await fixture.build();
+		});
+
+		it('Verify that the HTML code is compressed in the pro', async () => {
+			const html = await fixture.readFile('/index.html');
+			expect(regex.test(html.slice(20))).to.equal(false);
+		});
+	})
+});

packages/astro/test/fixtures/minification-html/astro.config.mjs

@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	compressHTML: true,
+
+});

packages/astro/test/fixtures/minification-html/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@test/minification-html",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}

packages/astro/test/fixtures/minification-html/src/pages/aside.astro

@@ -0,0 +1,3 @@
+---
+---
+<div>2</div>

packages/astro/test/fixtures/minification-html/src/pages/index.astro

@@ -0,0 +1,21 @@
+---
+import Aside from './aside.astro'
+import Page from './page.astro'
+---
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>minimum html</title>
+		<style>
+			.body{
+				background: red;
+			}
+		</style>
+  </head>
+  <body>
+		<Aside/>
+    <main></main>
+		<Page></Page>
+  </body>
+</html>

packages/astro/test/fixtures/minification-html/src/pages/page.astro

@@ -0,0 +1,3 @@
+---
+---
+<div>3</div>