Prevent the server plugin from running during the build (#2552)

* Prevent the server plugin from running during the build

* Adds a changeset

* More all before blocks to inside of a describe()

.changeset/fresh-moose-compare.md

@@ -0,0 +1,7 @@
+---
+'astro': patch
+---
+
+Fixes build slowness on large apps
+
+This fixes slowness on large apps, particularly during the static build. Fix is to prevent the Vite dev server plugin from being run during build, as it is not needed.

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

@@ -71,7 +71,7 @@ class AstroBuilder {
  },
  this.config.vite || {}
  ),
- { astroConfig: this.config, logging }
+ { astroConfig: this.config, logging, mode: 'build' }
  );
  this.viteConfig = viteConfig;
  const viteServer = await vite.createServer(viteConfig);

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

@@ -35,10 +35,11 @@ export type ViteConfigWithSSR = vite.InlineConfig & { ssr?: { external?: string[
 interface CreateViteOptions {
  astroConfig: AstroConfig;
  logging: LogOptions;
+ mode: 'dev' | 'build';
 }
 
 /** Return a common starting point for all Vite actions */
-export async function createVite(inlineConfig: ViteConfigWithSSR, { astroConfig, logging }: CreateViteOptions): Promise<ViteConfigWithSSR> {
+export async function createVite(inlineConfig: ViteConfigWithSSR, { astroConfig, logging, mode }: CreateViteOptions): Promise<ViteConfigWithSSR> {
  // First, start with the Vite configuration that Astro core needs
  let viteConfig: ViteConfigWithSSR = {
  cacheDir: fileURLToPath(new URL('./node_modules/.vite/', astroConfig.projectRoot)), // using local caches allows Astro to be used in monorepos, etc.
@@ -50,7 +51,9 @@ export async function createVite(inlineConfig: ViteConfigWithSSR, { astroConfig,
  plugins: [
  configAliasVitePlugin({ config: astroConfig }),
  astroVitePlugin({ config: astroConfig, logging }),
- astroViteServerPlugin({ config: astroConfig, logging }),
+ // The server plugin is for dev only and having it run during the build causes
+ // the build to run very slow as the filewatcher is triggered often.
+ mode === 'dev' && astroViteServerPlugin({ config: astroConfig, logging }),
  markdownVitePlugin({ config: astroConfig }),
  jsxVitePlugin({ config: astroConfig, logging }),
  astroPostprocessVitePlugin({ config: astroConfig }),

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

@@ -33,7 +33,7 @@ export default async function dev(config: AstroConfig, options: DevOptions = { l
  },
  config.vite || {}
  );
- const viteConfig = await createVite(viteUserConfig, { astroConfig: config, logging: options.logging });
+ const viteConfig = await createVite(viteUserConfig, { astroConfig: config, logging: options.logging, mode: 'dev' });
  const viteServer = await vite.createServer(viteConfig);
  await viteServer.listen(config.devOptions.port);
  const address = viteServer.httpServer!.address() as AddressInfo;

packages/astro/test/astro-class-list.test.js

@@ -2,14 +2,14 @@ import { expect } from 'chai';
 import cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
-let fixture;
+describe('Class List', async () => {
+ let fixture;
 
-before(async () => {
- fixture = await loadFixture({ projectRoot: './fixtures/astro-class-list/' });
- await fixture.build();
-});
+ before(async () => {
+  fixture = await loadFixture({ projectRoot: './fixtures/astro-class-list/' });
+  await fixture.build();
+ });
 
-describe('Class List', async () => {
  it('Passes class:list attributes as expected to elements', async () => {
  const html = await fixture.readFile('/index.html');
  const $ = cheerio.load(html);

packages/astro/test/astro-client-only.test.js

@@ -2,14 +2,14 @@ import { expect } from 'chai';
 import cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
-let fixture;
+describe('Client only components', () => {
+ let fixture;
 
-before(async () => {
- fixture = await loadFixture({ projectRoot: './fixtures/astro-client-only/' });
- await fixture.build();
-});
+ before(async () => {
+  fixture = await loadFixture({ projectRoot: './fixtures/astro-client-only/' });
+  await fixture.build();
+ });
 
-describe('Client only components', () => {
  it('Loads pages using client:only hydrator', async () => {
  const html = await fixture.readFile('/index.html');
  const $ = cheerio.load(html);

packages/astro/test/astro-component-code.test.js

@@ -2,14 +2,14 @@ import { expect } from 'chai';
 import cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
-let fixture;
+describe('<Code>', () => {
+ let fixture;
 
-before(async () => {
- fixture = await loadFixture({ projectRoot: './fixtures/astro-component-code/' });
- await fixture.build();
-});
+ before(async () => {
+  fixture = await loadFixture({ projectRoot: './fixtures/astro-component-code/' });
+  await fixture.build();
+ });
 
-describe('<Code>', () => {
  it('<Code> without lang or theme', async () => {
  let html = await fixture.readFile('/no-lang/index.html');
  const $ = cheerio.load(html);

packages/astro/test/astro-doctype.test.js

@@ -2,14 +2,14 @@ import { expect } from 'chai';
 import cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
-let fixture;
+describe('Doctype', () => {
+ let fixture;
 
-before(async () => {
- fixture = await loadFixture({ projectRoot: './fixtures/astro-doctype/' });
- await fixture.build();
-});
+ before(async () => {
+  fixture = await loadFixture({ projectRoot: './fixtures/astro-doctype/' });
+  await fixture.build();
+ });
 
-describe('Doctype', () => {
  it('Automatically prepends the standards mode doctype', async () => {
  const html = await fixture.readFile('/prepend/index.html');
 

packages/astro/test/astro-jsx.test.js

@@ -1,41 +1,44 @@
 import { expect } from 'chai';
 import { loadFixture } from './test-utils.js';
 
-let cwd = './fixtures/astro-jsx/';
-let orders = [
- ['preact', 'react', 'solid'],
- ['preact', 'solid', 'react'],
- ['react', 'preact', 'solid'],
- ['react', 'solid', 'preact'],
- ['solid', 'react', 'preact'],
- ['solid', 'preact', 'react'],
-];
-let fixtures = {};
+describe('JSX', () => {
 
-before(async () => {
- await Promise.all(
- orders.map((renderers, n) =>
- loadFixture({
- projectRoot: cwd,
- renderers: renderers.map((name) => `@astrojs/renderer-${name}`),
- dist: new URL(`${cwd}dist-${n}/`, import.meta.url),
- }).then((fixture) => {
- fixtures[renderers.toString()] = fixture;
- return fixture.build();
- })
- )
- );
-});
-
-it('Renderer order', () => {
- it('JSX renderers can be defined in any order', async () => {
- if (!Object.values(fixtures).length) {
- throw new Error(`JSX renderers didn’t build properly`);
- }
-
- for (const [name, fixture] of Object.entries(fixtures)) {
- const html = await fixture.readFile('/index.html');
- expect(html, name).to.be.ok;
- }
+ let cwd = './fixtures/astro-jsx/';
+ let orders = [
+ ['preact', 'react', 'solid'],
+ ['preact', 'solid', 'react'],
+ ['react', 'preact', 'solid'],
+ ['react', 'solid', 'preact'],
+ ['solid', 'react', 'preact'],
+ ['solid', 'preact', 'react'],
+ ];
+ let fixtures = {};
+
+ before(async () => {
+ await Promise.all(
+ orders.map((renderers, n) =>
+ loadFixture({
+ projectRoot: cwd,
+ renderers: renderers.map((name) => `@astrojs/renderer-${name}`),
+ dist: new URL(`${cwd}dist-${n}/`, import.meta.url),
+ }).then((fixture) => {
+ fixtures[renderers.toString()] = fixture;
+ return fixture.build();
+ })
+ )
+ );
+ });
+
+ it('Renderer order', () => {
+ it('JSX renderers can be defined in any order', async () => {
+ if (!Object.values(fixtures).length) {
+ throw new Error(`JSX renderers didn’t build properly`);
+ }
+
+ for (const [name, fixture] of Object.entries(fixtures)) {
+ const html = await fixture.readFile('/index.html');
+ expect(html, name).to.be.ok;
+ }
+ });
  });
 });

packages/astro/test/astro-pagination.test.js

@@ -2,20 +2,20 @@ import { expect } from 'chai';
 import cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
-let fixture;
+describe('Pagination', () => {
+ let fixture;
 
-before(async () => {
- fixture = await loadFixture({
- projectRoot: './fixtures/astro-pagination/',
- buildOptions: {
- site: 'https://mysite.dev/blog/',
- sitemap: false,
- },
+ before(async () => {
+ fixture = await loadFixture({
+ projectRoot: './fixtures/astro-pagination/',
+ buildOptions: {
+ site: 'https://mysite.dev/blog/',
+ sitemap: false,
+ },
+ });
+ await fixture.build();
  });
- await fixture.build();
-});
 
-describe('Pagination', () => {
  it('optional root page', async () => {
  for (const file of ['/posts/optional-root-page/index.html', '/posts/optional-root-page/2/index.html', '/posts/optional-root-page/3/index.html']) {
  expect(await fixture.readFile(file)).to.be.ok;

packages/astro/test/builtins.test.js

@@ -2,14 +2,14 @@ import { expect } from 'chai';
 import cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
-let fixture;
+describe('Node builtins', () => {
+ let fixture;
 
-before(async () => {
- fixture = await loadFixture({ projectRoot: './fixtures/builtins/' });
- await fixture.build();
-});
+ before(async () => {
+  fixture = await loadFixture({ projectRoot: './fixtures/builtins/' });
+  await fixture.build();
+ });
 
-describe('Node builtins', () => {
  it('Can be used with the node: prefix', async () => {
  const html = await fixture.readFile('/index.html');
  const $ = cheerio.load(html);

packages/astro/test/lit-element.test.js

@@ -2,24 +2,24 @@ import { expect } from 'chai';
 import cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
-let fixture;
-
-const NODE_VERSION = parseFloat(process.versions.node);
-const stripExpressionMarkers = (html) => html.replace(/<!--\/?lit-part-->/g, '');
+describe('LitElement test', () => {
+ let fixture;
 
-before(async () => {
- // @lit-labs/ssr/ requires Node 13.9 or higher
- if (NODE_VERSION < 13.9) {
- return;
- }
- fixture = await loadFixture({
- projectRoot: './fixtures/lit-element/',
- renderers: ['@astrojs/renderer-lit'],
+ const NODE_VERSION = parseFloat(process.versions.node);
+ const stripExpressionMarkers = (html) => html.replace(/<!--\/?lit-part-->/g, '');
+
+ before(async () => {
+ // @lit-labs/ssr/ requires Node 13.9 or higher
+ if (NODE_VERSION < 13.9) {
+ return;
+ }
+ fixture = await loadFixture({
+ projectRoot: './fixtures/lit-element/',
+ renderers: ['@astrojs/renderer-lit'],
+ });
+ await fixture.build();
  });
- await fixture.build();
-});
 
-describe('LitElement test', () => {
  it('Renders a custom element by tag name', async () => {
  // @lit-labs/ssr/ requires Node 13.9 or higher
  if (NODE_VERSION < 13.9) {

packages/astro/test/markdown.test.js

@@ -2,20 +2,20 @@ import { expect } from 'chai';
 import cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
-let fixture;
+describe('Markdown tests', () => {
+ let fixture;
 
-before(async () => {
- fixture = await loadFixture({
- projectRoot: './fixtures/markdown/',
- buildOptions: {
- sitemap: false,
- },
- renderers: ['@astrojs/renderer-preact'],
+ before(async () => {
+ fixture = await loadFixture({
+ projectRoot: './fixtures/markdown/',
+ buildOptions: {
+ sitemap: false,
+ },
+ renderers: ['@astrojs/renderer-preact'],
+ });
+ await fixture.build();
  });
- await fixture.build();
-});
 
-describe('Markdown tests', () => {
  it('Can load a simple markdown page with Astro', async () => {
  const html = await fixture.readFile('/post/index.html');
  const $ = cheerio.load(html);

packages/astro/test/postcss.test.js

@@ -3,25 +3,25 @@ import cheerio from 'cheerio';
 import eol from 'eol';
 import { loadFixture } from './test-utils.js';
 
-const PREFIXED_CSS = `{-webkit-appearance:none;appearance:none}`;
-
-let fixture;
-let bundledCSS;
-before(async () => {
- fixture = await loadFixture({
- projectRoot: './fixtures/postcss',
- renderers: ['@astrojs/renderer-solid', '@astrojs/renderer-svelte', '@astrojs/renderer-vue'],
- });
- await fixture.build();
-
- // get bundled CSS (will be hashed, hence DOM query)
- const html = await fixture.readFile('/index.html');
- const $ = cheerio.load(html);
- const bundledCSSHREF = $('link[rel=stylesheet][href^=./assets/]').attr('href');
- bundledCSS = await fixture.readFile(bundledCSSHREF.replace(/^\/?/, '/'));
-});
-
 describe('PostCSS', () => {
+ const PREFIXED_CSS = `{-webkit-appearance:none;appearance:none}`;
+
+ let fixture;
+ let bundledCSS;
+ before(async () => {
+ fixture = await loadFixture({
+ projectRoot: './fixtures/postcss',
+ renderers: ['@astrojs/renderer-solid', '@astrojs/renderer-svelte', '@astrojs/renderer-vue'],
+ });
+ await fixture.build();
+
+ // get bundled CSS (will be hashed, hence DOM query)
+ const html = await fixture.readFile('/index.html');
+ const $ = cheerio.load(html);
+ const bundledCSSHREF = $('link[rel=stylesheet][href^=./assets/]').attr('href');
+ bundledCSS = await fixture.readFile(bundledCSSHREF.replace(/^\/?/, '/'));
+ });
+
  it('works in Astro page styles', () => {
  expect(bundledCSS).to.match(new RegExp(`.astro-page.astro-[^{]+${PREFIXED_CSS}`));
  });