perf: omit unused UI CSS and minify final bundles
This commit is contained in:
@@ -40,6 +40,7 @@ import {
|
|||||||
headToString,
|
headToString,
|
||||||
renderProductionFontHead,
|
renderProductionFontHead,
|
||||||
findStyleEntry,
|
findStyleEntry,
|
||||||
|
bundleCss,
|
||||||
renderStyles,
|
renderStyles,
|
||||||
resolveThemeConfig,
|
resolveThemeConfig,
|
||||||
renderThemeCss,
|
renderThemeCss,
|
||||||
@@ -401,12 +402,16 @@ export async function runBuild(appRoot: string): Promise<void> {
|
|||||||
console.log(`✓ Theme: ${theme.names.length} themes (default: ${theme.default})`);
|
console.log(`✓ Theme: ${theme.names.length} themes (default: ${theme.default})`);
|
||||||
|
|
||||||
// 1a2) Wire UI stylesheet (all component classes, themed via tokens).
|
// 1a2) Wire UI stylesheet (all component classes, themed via tokens).
|
||||||
const uiStyles = uiCss();
|
const uiStyles = config.styles?.includeUi === false ? "" : uiCss();
|
||||||
writeFileSync(join(distDir, "ui.css"), uiStyles, "utf8");
|
writeFileSync(join(distDir, "ui.css"), uiStyles, "utf8");
|
||||||
const frameworkStyles = `${themeCss}\n${uiStyles}`;
|
const frameworkStyles = `${themeCss}\n${uiStyles}`;
|
||||||
writeFileSync(join(distDir, "framework.css"), frameworkStyles, "utf8");
|
writeFileSync(join(distDir, "framework.css"), frameworkStyles, "utf8");
|
||||||
assetHash.update(uiStyles);
|
assetHash.update(uiStyles);
|
||||||
console.log(`✓ UI: dist/ui.css + framework.css`);
|
console.log(
|
||||||
|
config.styles?.includeUi === false
|
||||||
|
? `✓ UI: omitted by styles.includeUi`
|
||||||
|
: `✓ UI: dist/ui.css + framework.css`,
|
||||||
|
);
|
||||||
|
|
||||||
// 1a3) Validation: bake schema descriptors into the client script.
|
// 1a3) Validation: bake schema descriptors into the client script.
|
||||||
const descriptors: Record<string, SchemaDescriptor> = {};
|
const descriptors: Record<string, SchemaDescriptor> = {};
|
||||||
@@ -447,8 +452,12 @@ export async function runBuild(appRoot: string): Promise<void> {
|
|||||||
},
|
},
|
||||||
config.styles,
|
config.styles,
|
||||||
);
|
);
|
||||||
assetHash.update(css);
|
const combinedSource = `${frameworkStyles}\n${css}`;
|
||||||
const combinedCss = `${frameworkStyles}\n${css}`;
|
const combinedInput = join(distDir, ".wrnexus-combined.css");
|
||||||
|
writeFileSync(combinedInput, combinedSource, "utf8");
|
||||||
|
const combinedCss = await bundleCss(combinedInput, "production");
|
||||||
|
rmSync(combinedInput, { force: true });
|
||||||
|
assetHash.update(combinedCss);
|
||||||
// One blocking CSS request in production: tokens → UI → application CSS.
|
// One blocking CSS request in production: tokens → UI → application CSS.
|
||||||
// The standalone framework.css remains available for apps without global CSS.
|
// The standalone framework.css remains available for apps without global CSS.
|
||||||
writeFileSync(join(distDir, "styles.css"), combinedCss, "utf8");
|
writeFileSync(join(distDir, "styles.css"), combinedCss, "utf8");
|
||||||
|
|||||||
@@ -42,6 +42,8 @@ export interface StyleProcessContext {
|
|||||||
export interface StylesConfig {
|
export interface StylesConfig {
|
||||||
/** Path to the CSS entry, relative to the app root. Default: app/styles/global.css */
|
/** Path to the CSS entry, relative to the app root. Default: app/styles/global.css */
|
||||||
entry?: string;
|
entry?: string;
|
||||||
|
/** Include the complete @wrnexus/ui component catalog stylesheet. Default true. */
|
||||||
|
includeUi?: boolean;
|
||||||
/**
|
/**
|
||||||
* Optional custom processor. Return the final CSS string. Use this to run
|
* Optional custom processor. Return the final CSS string. Use this to run
|
||||||
* Tailwind, PostCSS, Sass, etc. When omitted, the built-in Bun CSS bundler is
|
* Tailwind, PostCSS, Sass, etc. When omitted, the built-in Bun CSS bundler is
|
||||||
|
|||||||
Reference in New Issue
Block a user