tessl/npm-storybook--manager-webpack5
Builder implemented with webpack5 and webpack5-compatible loaders/plugins/config, used by @storybook/core-server to build the manager UI
—
Pending
caching.mddocs/
Caching System
Intelligent caching system for manager builds and configurations to improve build performance by avoiding unnecessary rebuilds when configuration and files haven't changed.
Capabilities
Manager Cache Usage
Checks if a cached manager build can be reused based on configuration and file modification times.
/**
* Check if cached manager build can be reused
* @param cacheKey - Unique key identifying the cache entry
* @param options - Storybook configuration options with cache provider
* @param managerConfig - Current webpack configuration for comparison
* @returns Promise resolving to true if cache can be used, false otherwise
*/
function useManagerCache(
cacheKey: string,
options: Options,
managerConfig: Configuration
): Promise<boolean>;
interface Options {
/** Cache provider for storing/retrieving cached data */
cache: CacheProvider;
/** Path to Storybook configuration directory */
configDir: string;
/** Other Storybook options */
[key: string]: any;
}
interface CacheProvider {
/** Retrieve cached value by key */
get(key: string): Promise<string>;
/** Store value with key */
set(key: string, value: string): Promise<void>;
/** Check if cache entry exists */
fileExists(key: string): boolean;
/** Remove cache entry */
remove(key: string): Promise<void>;
}Usage Examples:
import { useManagerCache } from "@storybook/manager-webpack5/utils/manager-cache";
const cacheKey = `managerConfig-webpack5@${storybookVersion}`;
const canUseCache = await useManagerCache(cacheKey, options, webpackConfig);
if (canUseCache) {
console.log('Using cached manager build');
// Skip build process
} else {
console.log('Cache miss, rebuilding manager');
// Proceed with build
}Cache Invalidation Logic
The cache system checks several factors to determine if a cached build is valid:
- Configuration Comparison: Compares current webpack configuration with cached configuration using JSON serialization
- File Modification Times: Checks modification times of all files in the config directory
- Ignored Files: Automatically ignores certain files that don't affect the manager build:
main.(m)js|ts- Already handled separatelypreview.(m)js|ts- Only affects preview, not managerpreview-head.html- Only affects preview, not manager
Clear Manager Cache
Removes cached manager build data when cache invalidation is needed.
/**
* Remove cached manager build data
* @param cacheKey - Unique key identifying the cache entry to remove
* @param options - Storybook configuration options with cache provider
* @returns Promise resolving to true if cache was cleared, false if no cache existed
*/
function clearManagerCache(cacheKey: string, options: Options): Promise<boolean>;Usage Examples:
import { clearManagerCache } from "@storybook/manager-webpack5/utils/manager-cache";
// Clear cache when configuration changes significantly
const wasCleared = await clearManagerCache(cacheKey, options);
if (wasCleared) {
console.log('Cleared cached manager configuration');
} else {
console.log('No cached configuration to clear');
}Cache Key Generation
Cache keys are typically generated using a combination of:
- Manager configuration type (e.g., "managerConfig")
- Webpack version identifier
- Storybook version number
Example:
const packageFile = await findUp('package.json', { cwd: __dirname });
const { version: storybookVersion } = await fs.readJSON(packageFile);
const cacheKey = `managerConfig-webpack5@${storybookVersion}`;Cache Storage Format
The cache stores data in the following format:
{timestamp}_{serialized_config}Where:
timestamp: ISO timestamp of when the cache was createdserialized_config: JSON-serialized webpack configuration (excluding the cache property)
Performance Benefits
The caching system provides significant performance improvements:
- Configuration Reuse: Avoids webpack configuration generation when nothing has changed
- Build Skipping: Can skip entire build process when using prebuilt manager or cached builds
- Selective Invalidation: Only rebuilds when relevant files have actually changed
- Version Awareness: Automatically invalidates cache when Storybook version changes
Integration with Other Systems
The caching system integrates with:
- Prebuilt Manager: Works alongside prebuilt manager detection to choose the fastest option
- Development Server: Supports cache during development for faster startup
- CI/CD: Enables faster builds in continuous integration environments
- File Watching: Coordinates with file watchers to invalidate cache when files change
Install with Tessl CLI
npx tessl i tessl/npm-storybook--manager-webpack5