improve build perf (#2772)

.changeset/tough-cherries-bathe.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Improve build performance, especially on large sites

.changeset/tough-dragons-sniff.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Surface vite warnings to the user

packages/astro/src/core/build/index.ts

@@ -65,7 +65,7 @@ class AstroBuilder {
 				{
 					mode: this.mode,
 					server: {
-						hmr: { overlay: false },
+						hmr: false,
 						middlewareMode: 'ssr',
 					},
 				},

packages/astro/src/core/build/scan-based-build.ts

@@ -47,7 +47,7 @@ export async function build(opts: ScanBasedBuildOptions) {
 	const internals = createBuildInternals();
 
 	return await vite.build({
-		logLevel: 'error',
+		logLevel: 'warn',
 		mode: 'production',
 		build: {
 			emptyOutDir: true,

packages/astro/src/core/build/static-build.ts

@@ -35,7 +35,11 @@ export interface StaticBuildOptions {
 	viteConfig: ViteConfigWithSSR;
 }
 
-const MAX_CONCURRENT_RENDERS = 10;
+// Render is usually compute, which Node.js can't parallelize well.
+// In real world testing, dropping from 10->1 showed a notiable perf
+// improvement. In the future, we can revisit a smarter parallel
+// system, possibly one that parallelizes if async IO is detected.
+const MAX_CONCURRENT_RENDERS = 1;
 
 const STATUS_CODE_PAGES = new Set(['/404', '/500']);
 
@@ -161,8 +165,9 @@ export async function staticBuild(opts: StaticBuildOptions) {
 	// condition, so we are doing it ourselves
 	emptyDir(astroConfig.dist, new Set('.git'));
 
-	// Run the SSR build and client build in parallel
-	const [ssrResult] = (await Promise.all([ssrBuild(opts, internals, pageInput), clientBuild(opts, internals, jsInput)])) as RollupOutput[];
+	// Build your project (SSR application code, assets, client JS, etc.)
+	const ssrResult = await ssrBuild(opts, internals, pageInput) as RollupOutput;
+	await clientBuild(opts, internals, jsInput);
 
 	// SSG mode, generate pages.
 	if (staticMode) {
@@ -181,13 +186,12 @@ async function ssrBuild(opts: StaticBuildOptions, internals: BuildInternals, inp
 	const out = ssr ? getServerRoot(astroConfig) : getOutRoot(astroConfig);
 
 	return await vite.build({
-		logLevel: 'error',
+		logLevel: 'warn',
 		mode: 'production',
 		build: {
 			...viteConfig.build,
 			emptyOutDir: false,
 			manifest: ssr,
-			minify: false,
 			outDir: fileURLToPath(out),
 			ssr: true,
 			rollupOptions: {
@@ -199,7 +203,12 @@ async function ssrBuild(opts: StaticBuildOptions, internals: BuildInternals, inp
 					assetFileNames: 'assets/[name].[hash][extname]',
 				},
 			},
-			target: 'esnext', // must match an esbuild target
+			// must match an esbuild target
+			target: 'esnext', 
+			// improve build performance
+			minify: false,
+			polyfillModulePreload: false,
+			reportCompressedSize: false,
 		},
 		plugins: [
 			vitePluginNewBuild(input, internals, 'mjs'),
@@ -226,9 +235,8 @@ async function clientBuild(opts: StaticBuildOptions, internals: BuildInternals,
 	}
 
 	const out = astroConfig.buildOptions.experimentalSsr ? getClientRoot(astroConfig) : getOutRoot(astroConfig);
-
 	return await vite.build({
-		logLevel: 'error',
+		logLevel: 'warn',
 		mode: 'production',
 		build: {
 			emptyOutDir: false,
@@ -295,13 +303,11 @@ async function generatePages(result: RollupOutput, opts: StaticBuildOptions, int
 	// Get renderers to be shared for each page generation.
 	const renderers = await collectRenderers(opts);
 
-	const generationPromises = [];
 	for (let output of result.output) {
 		if (chunkIsPage(opts.astroConfig, output, internals)) {
-			generationPromises.push(generatePage(output as OutputChunk, opts, internals, facadeIdToPageDataMap, renderers));
+			await (generatePage(output as OutputChunk, opts, internals, facadeIdToPageDataMap, renderers));
 		}
 	}
-	await Promise.all(generationPromises);
 }
 
 async function generatePage(output: OutputChunk, opts: StaticBuildOptions, internals: BuildInternals, facadeIdToPageDataMap: Map<string, PageBuildData>, renderers: Renderer[]) {

packages/astro/src/core/create-vite.ts

@@ -49,7 +49,7 @@ export async function createVite(inlineConfig: ViteConfigWithSSR, { astroConfig,
 	let viteConfig: ViteConfigWithSSR = {
 		cacheDir: fileURLToPath(new URL('./node_modules/.vite/', astroConfig.projectRoot)), // using local caches allows Astro to be used in monorepos, etc.
 		clearScreen: false, // we want to control the output, not Vite
-		logLevel: 'error', // log errors only
+		logLevel: 'warn', // log warnings and errors only
 		optimizeDeps: {
 			entries: ['src/**/*'], // Try and scan a user’s project (won’t catch everything),
 		},

packages/astro/src/vite-plugin-astro/index.ts

@@ -5,6 +5,7 @@ import type { LogOptions } from '../core/logger.js';
 import esbuild from 'esbuild';
 import { fileURLToPath } from 'url';
 import slash from 'slash';
+import fs from 'fs';
 import { getViteTransform, TransformHook } from './styles.js';
 import { parseAstroRequest } from './query.js';
 import { cachedCompilation } from './compile.js';
@@ -124,13 +125,11 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
 				}
 			}
 
-			return null;
-		},
-		async transform(source, id, opts) {
 			if (!id.endsWith('.astro')) {
-				return;
+				return null;
 			}
 
+			const source = await fs.promises.readFile(id, {encoding: 'utf-8'});
 			try {
 				const transformResult = await cachedCompilation(config, id, source, viteTransform, { ssr: Boolean(opts?.ssr) });
 
@@ -140,6 +139,8 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
 					loader: 'ts',
 					sourcemap: 'external',
 					sourcefile: id,
+					// Pass relevant Vite options, if needed:
+					define: config.vite.define,
 				});
 
 				// Signal to Vite that we accept HMR updates

packages/astro/test/fixtures/astro-doctype/src/layouts/WithDoctype.astro

@@ -5,7 +5,7 @@ import Meta from '../components/Meta.astro';
 <html lang="en">
   <head>
     <title>My App</title>
-    <link rel="styleshseet" href={Astro.resolve('../styles/global.css')}>
+    <link rel="styleshseet" href="/styles/global.css">
     <Meta />
   </head>
   <body>

packages/astro/test/fixtures/astro-doctype/src/layouts/WithoutDoctype.astro

@@ -1,7 +1,7 @@
 <html lang="en">
   <head>
     <title>My App</title>
-    <link rel="styleshseet" href={Astro.resolve('../styles/global.css')}>
+    <link rel="styleshseet" href="/styles/global.css">
   </head>
   <body>