From 763ff2d1e44f54b899d7c65386f1b4b877c95737 Mon Sep 17 00:00:00 2001 From: wulinsheng123 <409187100@qq.com> Date: Wed, 17 May 2023 21:26:49 +0800 Subject: [PATCH] HTML minification (#6706) * TDD pattern development * add compact property when the user run pnpm run build * add minification for pro * fix yaml file collision * fix yaml collision * fix pageage file * optimize unit test * fix revert code * fix comment * update yaml * fix default value * add test for dev * Update packages/astro/test/astro-minification-html.test.js Co-authored-by: Emanuele Stoppa * Update packages/astro/test/astro-minification-html.test.js Co-authored-by: Emanuele Stoppa * Update packages/astro/test/astro-minification-html.test.js Co-authored-by: Emanuele Stoppa * Update packages/astro/test/astro-minification-html.test.js Co-authored-by: Emanuele Stoppa * Update packages/astro/test/astro-minification-html.test.js Co-authored-by: Emanuele Stoppa * Update the docs to reflect it's opt-in * Add tests for SSR * Document how the tests remove the doctype line * Expand on the changeset * rename for slice -100 * Updates based on PR comments * optimize description * Update packages/astro/src/@types/astro.ts Co-authored-by: Sarah Rainsberger --------- Co-authored-by: wuls Co-authored-by: Matthew Phillips Co-authored-by: Matthew Phillips Co-authored-by: Emanuele Stoppa Co-authored-by: Sarah Rainsberger --- .changeset/tiny-snails-dance.md | 17 ++++ packages/astro/src/@types/astro.ts | 18 +++++ packages/astro/src/core/compile/compile.ts | 1 + packages/astro/src/core/config/schema.ts | 6 ++ .../astro/src/runtime/server/render/page.ts | 1 - .../minification-html/astro.config.mjs | 7 ++ .../fixtures/minification-html/package.json | 8 ++ .../minification-html/src/pages/aside.astro | 3 + .../minification-html/src/pages/index.astro | 21 +++++ .../minification-html/src/pages/page.astro | 3 + packages/astro/test/minification-html.test.js | 79 +++++++++++++++++++ pnpm-lock.yaml | 6 ++ 12 files changed, 169 insertions(+), 1 deletion(-) create mode 100644 .changeset/tiny-snails-dance.md create mode 100644 packages/astro/test/fixtures/minification-html/astro.config.mjs create mode 100644 packages/astro/test/fixtures/minification-html/package.json create mode 100644 packages/astro/test/fixtures/minification-html/src/pages/aside.astro create mode 100644 packages/astro/test/fixtures/minification-html/src/pages/index.astro create mode 100644 packages/astro/test/fixtures/minification-html/src/pages/page.astro create mode 100644 packages/astro/test/minification-html.test.js diff --git a/.changeset/tiny-snails-dance.md b/.changeset/tiny-snails-dance.md new file mode 100644 index 000000000000..ef25e0459ef7 --- /dev/null +++ b/.changeset/tiny-snails-dance.md @@ -0,0 +1,17 @@ +--- +'astro': minor +--- + +Adds an opt-in way to minify the HTML output. + +Using the `compressHTML` option Astro will remove whitespace from Astro components. This only applies to components written in `.astro` format and happens in the compiler to maximize performance. You can enable with: + +```js +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + compressHTML: true +}); +``` + +Compression occurs both in development mode and in the final build. diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index 19606b0703d1..2441238aa177 100644 --- a/packages/astro/src/@types/astro.ts +++ b/packages/astro/src/@types/astro.ts @@ -466,6 +466,24 @@ export interface AstroUserConfig { */ site?: string; + + /** + * @docs + * @name compressHTML + * @type {boolean} + * @default `false` + * @description + * This is an option to minify your HTML output and reduce the size of your HTML files. When enabled, Astro removes all whitespace from your HTML, including line breaks, from `.astro` components. This occurs both in development mode and in the final build. + * To enable this, set the `compressHTML` flag to `true`. + * + * ```js + * { + * compressHTML: true + * } + * ``` + */ + compressHTML?: boolean; + /** * @docs * @name base diff --git a/packages/astro/src/core/compile/compile.ts b/packages/astro/src/core/compile/compile.ts index 7554ec119156..4c76c4c65694 100644 --- a/packages/astro/src/core/compile/compile.ts +++ b/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', diff --git a/packages/astro/src/core/config/schema.ts b/packages/astro/src/core/config/schema.ts index 15dcd7bfd3b3..2948b2fd97ef 100644 --- a/packages/astro/src/core/config/schema.ts +++ b/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, @@ -72,6 +73,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')]) @@ -225,6 +227,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) diff --git a/packages/astro/src/runtime/server/render/page.ts b/packages/astro/src/runtime/server/render/page.ts index ce2d165a712a..f4a02a75f36a 100644 --- a/packages/astro/src/runtime/server/render/page.ts +++ b/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 = { ...(props ?? {}), 'server:root': true }; - let output: ComponentIterable; let head = ''; try { diff --git a/packages/astro/test/fixtures/minification-html/astro.config.mjs b/packages/astro/test/fixtures/minification-html/astro.config.mjs new file mode 100644 index 000000000000..4cc49df629d8 --- /dev/null +++ b/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, + +}); diff --git a/packages/astro/test/fixtures/minification-html/package.json b/packages/astro/test/fixtures/minification-html/package.json new file mode 100644 index 000000000000..01c5bd4b8522 --- /dev/null +++ b/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:*" + } +} diff --git a/packages/astro/test/fixtures/minification-html/src/pages/aside.astro b/packages/astro/test/fixtures/minification-html/src/pages/aside.astro new file mode 100644 index 000000000000..3a388c276b35 --- /dev/null +++ b/packages/astro/test/fixtures/minification-html/src/pages/aside.astro @@ -0,0 +1,3 @@ +--- +--- +
2
diff --git a/packages/astro/test/fixtures/minification-html/src/pages/index.astro b/packages/astro/test/fixtures/minification-html/src/pages/index.astro new file mode 100644 index 000000000000..8feb4e2e0b64 --- /dev/null +++ b/packages/astro/test/fixtures/minification-html/src/pages/index.astro @@ -0,0 +1,21 @@ +--- +import Aside from './aside.astro' +import Page from './page.astro' +--- + + + + + minimum html + + + +