Caching intermediate files during build

[kierangilliam]

I'm using the build command programmatically. This command is called multiple times in production. My project has hundreds of files, and I want to enable incremental builds for production to speed up the process. I need a way to cache intermediate build steps to reduce the build time for subsequent builds.

Whenever my server is deployed, I lazily build javascript bundles using Vite's build command. The server will immediately serve a cached bundle and then perform a rebuild in the background.

Example: GET /bundle?id=A => Returns a Javascript file from a persistent cache immediately. Builds a new version of A in the background and updates the cache.

This has to happen lazily because there are thousands of different ids. I do not have the CI resources to pre-build all of these files. Many files only get accessed once a month, so rebuilding on each deployment (which happens once a day) would be a massive waste of time.

Project Structure:

node_modules/ // thousands of files
src/
  components/
    A.jsx
    B.jsx
    C.jsx
    D.jsx
    ... // thousands of different components
  routes/ // hundreds of files
index.js
vite.config.js

Server implementation (index.js):

I have a custom plugin that selects either A, B, C, or D depending on a query parameter.

import { build } from 'vite';

const cache = new PersistentCache()

app.get('/bundle', async (req, res) => {
  const id = req.query.id; // either A, B, C, or D
  if (cache.get(id)) {
    res.end(cache.get(id));
  }

  if (!needsRebuild(id)) {
    return
  }

  const result = await build({
    // ...
    plugins: [
      // ...
      myCustomPlugin(id),
    ],
  });

  cache.set(id, asJsFile(result))
});

myCustomPlugin will resolve import thing from 'virtual:component' as src/components/${id}.jsx. Note that I cannot do dynamic imports for this setup.

Whenever I call build, Vite will rebuild everything: node_modules, src/routes, etc.

I've tried using rollupOptions.cache, but the caching doesn't seem to speed up the builds. I'm looking for a way to enable incremental builds for production without using the Vite development server when doing programmatic builds.

Is there any recommended approach to achieve this? I'm open to suggestions on how to optimize my build process in this scenario.

Thank you!

[kierangilliam]

We're able to halve build times by wrapping plugins with:

plugins: [
  pluginCache('svelte-svg', svelteSVG()),
  pluginCache('commonjs', commonjs()),
  // etc
]

The other half of the build time is spent on the calls: addModuleSource and includeStatements. Node.js profile:

What strategies can we use to reduce the time spent processing addModuleSource and includeStatements?

[kierangilliam]

Here's the pluginCache source:

import type { PluginOption } from 'vite';
import fs from 'fs';
import path from 'path';
import crypto from 'crypto';
import type { LoadResult, TransformResult } from 'rollup';
import { existsSync, mkdirSync } from 'fs';

const CACHING_ENABLED = true;
// The speed up from this is negligible 
const IN_MEMORY_CACHE_ENABLED = true;
const Cache = new Map<string, any>();

const now = () => {
  const now = new Date();
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  const seconds = now.getSeconds().toString().padStart(2, '0');

  const currentTime = `${hours}:${minutes}:${seconds}`;
  return currentTime;
};

const CACHE_DIR = 'build/cache';
const LOGS_DIR = `logs/${now()}`;

try {
  mkdirSync(LOGS_DIR, { recursive: true });
  mkdirSync(CACHE_DIR, { recursive: true });
} catch (_error) {
  //
}

// TODO: File contents?
function createCacheKey(
  keyPrefix: string,
  id: string,
  type: 'load' | 'transform',
) {
  const hash = crypto.createHash('sha1');
  hash.update(keyPrefix);
  hash.update(id);
  hash.update(type);
  return hash.digest('hex');
}

function readFromCache(cacheKey: string) {
  if (!CACHING_ENABLED) {
    return null;
  }

  if (IN_MEMORY_CACHE_ENABLED && Cache.has(cacheKey)) {
    return Cache.get(cacheKey);
  }

  const cachePath = path.join(CACHE_DIR, cacheKey);
  if (existsSync(cachePath)) {
    const result = JSON.parse(fs.readFileSync(cachePath, 'utf-8'));
    Cache.set(cacheKey, result);
    return result;
  }

  return null;
}

function writeToCache(cacheKey: string, content: LoadResult | TransformResult) {
  if (!CACHING_ENABLED) {
    return;
  }

  const cachePath = path.join(CACHE_DIR, cacheKey);
  Cache.set(cacheKey, content);
  fs.writeFileSync(cachePath, JSON.stringify(content));
}

export function pluginCache(
  identifier: string,
  plugin: PluginOption,
): PluginOption {
  if (Array.isArray(plugin)) {
    return plugin.map(plugin => {
      return pluginCache(identifier, plugin);
    });
  }

  if (!(plugin && 'transform' in plugin)) {
    throw 'Invalid plugin. No transform found';
  }

  const { name, load, transform, buildEnd } = plugin;
  const keyPrefix = `${identifier}-${name}-`;

  const metrics = {
    loadMisses: 0,
    loadHits: 0,
    transformMisses: 0,
    transformHits: 0,
  };

  let logs: string[] = [];

  const wrappedLoad: typeof load = async function (id) {
    if (typeof load !== 'function') {
      return null;
    }

    const cacheKey = createCacheKey(keyPrefix, id, 'load');
    const cachedContent = readFromCache(cacheKey);
    if (cachedContent !== null) {
      metrics.loadHits += 1;
      return cachedContent;
    }

    const result = await load.call(this, id);
    if (result != null) {
      logs.push(`[load] Cache miss\t ${id}`);
      metrics.loadMisses += 1;
      writeToCache(cacheKey, result);
    }

    return result;
  };

  const wrappedTransform: typeof transform = async function (code, id) {
    if (typeof transform !== 'function') {
      return null;
    }

    const cacheKey = createCacheKey(keyPrefix, id, 'transform');
    const cachedContent = readFromCache(cacheKey);
    if (cachedContent !== null) {
      // logs.push(`[transform] Cache hit\t\t ${id}`);
      metrics.transformHits += 1;
      return cachedContent;
    }

    // Call other plugins' transform hooks.
    const result = await transform.call(this, code, id);
    if (result != null) {
      logs.push(`[transform] Cache miss\t\t ${id}`);
      metrics.transformMisses += 1;
      writeToCache(cacheKey, result);
    }
    return result;
  };

  const wrappedBuildEnd: typeof buildEnd = async function (error) {
    logs = [
      `Load misses: ${metrics.loadMisses}`,
      `Load hits: ${metrics.loadHits}`,
      `Transform misses: ${metrics.transformMisses}`,
      `Transform hits: ${metrics.transformHits}`,
      ...logs,
    ];

    fs.writeFileSync(`./${LOGS_DIR}/${name}`, logs.join('\n'), 'utf-8');

    if (typeof buildEnd == 'function') {
      const result = await buildEnd.call(this, error);
      return result;
    }
  };

  return {
    ...plugin,
    load: wrappedLoad,
    transform: wrappedTransform,
    buildEnd: wrappedBuildEnd,
  };
}

[yejinjian]

Modify the code when you don't start vite. This will cause an error