Build tools and optimization plugins for Vite and Rollup with comprehensive bundling strategies. Qwik's build system is designed to enable resumable architecture and optimal code splitting.
Qwik plugin for Vite build system with development server and production optimization.
/**
* Create Qwik Vite plugin
* @param opts - Plugin configuration options
* @returns Vite plugin instance
*/
function qwikVite(opts?: QwikVitePluginOptions): QwikVitePlugin;
// Vite plugin configuration options
interface QwikVitePluginOptions {
/** Build target environment */
target?: QwikBuildTarget;
/** Build mode */
buildMode?: QwikBuildMode;
/** Force full build instead of incremental */
forceFullBuild?: boolean;
/** Entry strategy for code splitting */
entryStrategy?: EntryStrategy;
/** Source maps generation */
sourceMaps?: boolean | SourceMapsOption;
/** Debug mode */
debug?: boolean;
/** Experimental features */
experimental?: ExperimentalFeatures;
/** Client manifest path */
client?: {
/** Output directory for client build */
outDir?: string;
/** Manifest file name */
manifestName?: string;
};
/** Server-side rendering configuration */
ssr?: {
/** Output directory for SSR build */
outDir?: string;
/** Manifest file name */
manifestName?: string;
};
/** Development server options */
dev?: {
/** Click-to-source mapping */
clickToSource?: string[];
/** Headers for development */
headers?: Record<string, string>;
};
/** Optimizer options */
optimizer?: OptimizerOptions;
/** Transform options */
transformedModuleOutput?: (opts: TransformModuleInput) => TransformOutput | null;
}
// Build target options
type QwikBuildTarget = "client" | "ssr" | "lib" | "test";
// Build mode options
type QwikBuildMode = "development" | "production";
// Experimental features
interface ExperimentalFeatures {
/** Enable new features */
[feature: string]: boolean;
}Usage Examples:
// vite.config.ts
import { defineConfig } from "vite";
import { qwikVite } from "@builder.io/qwik/optimizer";
export default defineConfig({
plugins: [
qwikVite({
target: "client",
buildMode: "production",
entryStrategy: { type: "smart" },
sourceMaps: true,
experimental: {
resumableServer: true,
},
client: {
outDir: "dist/client",
manifestName: "q-manifest.json",
},
ssr: {
outDir: "dist/server",
manifestName: "ssr-manifest.json",
},
}),
],
});
// Development configuration
export const devConfig = defineConfig({
plugins: [
qwikVite({
target: "client",
buildMode: "development",
debug: true,
dev: {
clickToSource: ["@builder.io/qwik", "@builder.io/qwik-city"],
headers: {
"Cache-Control": "no-cache",
},
},
}),
],
});Qwik plugin for Rollup build system.
/**
* Create Qwik Rollup plugin
* @param opts - Plugin configuration options
* @returns Rollup plugin instance
*/
function qwikRollup(opts?: QwikRollupPluginOptions): any;
// Rollup plugin configuration options
interface QwikRollupPluginOptions {
/** Build target environment */
target?: QwikBuildTarget;
/** Build mode */
buildMode?: QwikBuildMode;
/** Entry strategy for code splitting */
entryStrategy?: EntryStrategy;
/** Force full build */
forceFullBuild?: boolean;
/** Optimizer options */
optimizer?: OptimizerOptions;
/** Transform options */
transformedModuleOutput?: (opts: TransformModuleInput) => TransformOutput | null;
}Usage Examples:
// rollup.config.js
import { qwikRollup } from "@builder.io/qwik/optimizer";
export default {
input: "src/entry.tsx",
plugins: [
qwikRollup({
target: "client",
buildMode: "production",
entryStrategy: {
type: "smart",
},
}),
],
output: {
dir: "dist",
format: "es",
},
};Core optimizer for transforming Qwik code and generating optimized bundles.
/**
* Create Qwik optimizer instance
* @param opts - Optimizer configuration
* @returns Promise resolving to optimizer instance
*/
function createOptimizer(opts?: OptimizerOptions): Promise<Optimizer>;
// Optimizer configuration options
interface OptimizerOptions {
/** System interface for file operations */
sys?: OptimizerSystem;
/** Binding configuration */
binding?: {
/** Optimizer binding type */
type?: "native" | "wasm";
};
}
// Main optimizer interface
interface Optimizer {
/** Transform modules */
transformModules(opts: TransformModulesOptions): Promise<TransformOutput>;
/** Transform single module */
transformModule(input: TransformModuleInput): Promise<TransformOutput>;
/** Transform file system */
transformFs(opts: TransformFsOptions): Promise<TransformOutput>;
/** Dispose optimizer resources */
dispose(): Promise<void>;
}
// System interface for optimizer
interface OptimizerSystem {
/** Current working directory */
cwd(): string;
/** Environment variables */
env: SystemEnvironment;
/** Operating system */
os: string;
/** Read file */
readFile(path: string): Promise<string>;
/** Write file */
writeFile(path: string, content: string): Promise<void>;
}
// System environment
type SystemEnvironment = "node" | "deno" | "bun" | "browser";Usage Examples:
import { createOptimizer } from "@builder.io/qwik/optimizer";
// Create optimizer instance
const optimizer = await createOptimizer({
binding: { type: "native" },
});
// Transform a single module
const result = await optimizer.transformModule({
code: `
import { component$ } from "@builder.io/qwik";
export const MyComponent = component$(() => {
return <div>Hello World</div>;
});
`,
path: "/src/component.tsx",
});
console.log(result.code); // Transformed code
console.log(result.map); // Source map
// Clean up
await optimizer.dispose();Configure code splitting and bundle generation strategies.
// Base entry strategy interface
interface EntryStrategy {
type: string;
}
// Single entry point strategy
interface SingleEntryStrategy extends EntryStrategy {
type: "single";
}
// Inline everything strategy
interface InlineEntryStrategy extends EntryStrategy {
type: "inline";
}
// Smart automatic strategy
interface SmartEntryStrategy extends EntryStrategy {
type: "smart";
/** Manual segments */
manual?: Record<string, string>;
}
// Component-based strategy
interface ComponentEntryStrategy extends EntryStrategy {
type: "component";
/** Segment size limit */
segment?: number;
}
// Segment-based strategy (alias: HookEntryStrategy)
interface SegmentEntryStrategy extends EntryStrategy {
type: "segment";
/** Segment configuration */
segment?: number;
}
// Segment analysis (alias: HookAnalysis)
interface SegmentAnalysis {
/** Segment name */
name: string;
/** Entry point */
entry: string;
/** Segment size */
size: number;
/** Dependencies */
deps: string[];
}Usage Examples:
// Smart strategy with manual segments
const smartStrategy: SmartEntryStrategy = {
type: "smart",
manual: {
"auth": "src/auth/**",
"admin": "src/admin/**",
},
};
// Component-based strategy
const componentStrategy: ComponentEntryStrategy = {
type: "component",
segment: 1000, // Max segment size in bytes
};Configuration for code transformation and optimization.
// Transform configuration
interface TransformOptions {
/** Source file path */
path: Path;
/** Source code */
code: string;
/** Entry strategy */
entryStrategy?: EntryStrategy;
/** Minification mode */
minify?: MinifyMode;
/** Source maps */
sourceMaps?: boolean | SourceMapsOption;
/** Transpilation options */
transpile?: boolean | TranspileOption;
/** Development mode */
isDev?: boolean;
/** Global injections */
globalInjections?: GlobalInjections;
/** Scope analysis */
scope?: Record<string, any>;
}
// Transform result
interface TransformOutput {
/** Transformed code */
code: string;
/** Source map */
map?: string;
/** Diagnostics */
diagnostics: Diagnostic[];
/** Is TypeScript */
isTypeScript: boolean;
/** Is JSX */
isJSX: boolean;
/** Module dependencies */
deps: string[];
}
// Transform module input
interface TransformModuleInput {
/** Source code */
code: string;
/** File path */
path: string;
}
// Multi-module transformation options
interface TransformModulesOptions {
/** Input modules */
input: TransformModuleInput[];
/** Entry strategy */
entryStrategy?: EntryStrategy;
/** Source root */
sourceRoot?: string;
}
// File system transformation options
interface TransformFsOptions {
/** Root directory */
rootDir: string;
/** Entry files */
entryStrategy?: EntryStrategy;
/** Output directory */
outDir?: string;
}
// Minification modes
type MinifyMode = "simplify" | "none";
// Source maps options
type SourceMapsOption = "external" | "inline" | boolean;
// Transpilation options
type TranspileOption = boolean;
// Global injections
interface GlobalInjections {
[globalName: string]: any;
}Type definitions for bundle generation and analysis.
// Bundle definition
interface QwikBundle {
/** Bundle size */
size: number;
/** Bundle symbols */
symbols: string[];
/** Bundle imports */
imports?: string[];
/** Dynamic imports */
dynamicImports?: string[];
/** Bundle origin */
origins?: string[];
}
// Bundle graph
interface QwikBundleGraph {
/** Bundle definitions */
[bundleName: string]: QwikBundle;
}
// Asset definition
interface QwikAsset {
/** Asset path */
path: string;
/** Asset size */
size: number;
/** Asset hash */
hash?: string;
}
// Symbol definition
interface QwikSymbol {
/** Symbol origin */
origin: string;
/** Display name */
displayName: string;
/** Symbol hash */
hash: string;
/** Canonical filename */
canonicalFilename: string;
/** Lexical scope capture */
ctxKind: "function" | "event";
/** Capture */
capture: boolean;
/** Local symbol */
local: boolean;
}
// Manifest definition
interface QwikManifest {
/** Manifest version */
version: string;
/** Bundles */
bundles: Record<string, QwikBundle>;
/** Symbol mappings */
symbols: Record<string, QwikSymbol>;
/** Entry strategy used */
entry?: EntryStrategy;
/** Platform information */
platform?: Record<string, any>;
}
// Server-specific manifest
interface ServerQwikManifest extends QwikManifest {
/** Server bundles */
serverBundles: Record<string, QwikBundle>;
}Symbol resolution and mapping utilities.
/**
* Create symbol mapper function
* @param manifest - Qwik manifest
* @param opts - Mapper options
* @returns Symbol mapper function
*/
function symbolMapper(manifest: QwikManifest, opts?: any): SymbolMapperFn;
// Symbol mapper interface
interface SymbolMapper {
/** Map symbol to bundle */
map(symbolName: string): string | undefined;
}
// Symbol mapper function type
type SymbolMapperFn = (symbolName: string) => string | undefined;Build diagnostic and error reporting.
// Diagnostic information
interface Diagnostic {
/** Diagnostic category */
category: DiagnosticCategory;
/** Error code */
code: string;
/** Error message */
message: string;
/** Source location */
loc?: SourceLocation;
/** Highlights */
highlights?: SourceLocation[];
/** Suggestions */
suggestions?: string[];
}
// Diagnostic categories
type DiagnosticCategory = "error" | "warning" | "note";
// Source code location
interface SourceLocation {
/** Start line */
startLine: number;
/** Start column */
startCol: number;
/** End line */
endLine: number;
/** End column */
endCol: number;
}
// Path utilities
interface Path {
/** File extension */
ext: string;
/** Directory */
dir: string;
/** Base name */
base: string;
/** Name without extension */
name: string;
}Get optimizer and related package versions.
/**
* Get version information for optimizer packages
* @returns Object with package versions
*/
function versions(): { [key: string]: string };Complete Example: Advanced Vite Configuration
// vite.config.ts
import { defineConfig, type UserConfig } from "vite";
import { qwikVite } from "@builder.io/qwik/optimizer";
export default defineConfig(({ command, mode }): UserConfig => {
const isDev = command === "serve";
const isProd = mode === "production";
return {
plugins: [
qwikVite({
target: isDev ? "client" : "ssr",
buildMode: isProd ? "production" : "development",
// Entry strategy configuration
entryStrategy: isProd ? {
type: "smart",
manual: {
"vendor": "node_modules/**",
"auth": "src/auth/**",
"admin": "src/admin/**",
},
} : {
type: "component",
},
// Source maps
sourceMaps: isDev,
// Development options
dev: isDev ? {
clickToSource: ["@builder.io/qwik"],
headers: {
"Cache-Control": "no-cache",
},
} : undefined,
// Client build configuration
client: {
outDir: "dist/client",
manifestName: "q-manifest.json",
},
// SSR build configuration
ssr: {
outDir: "dist/server",
manifestName: "ssr-manifest.json",
},
// Optimizer options
optimizer: {
binding: {
type: process.platform === "win32" ? "wasm" : "native",
},
},
// Experimental features
experimental: {
resumableServer: true,
},
}),
],
// Build configuration
build: {
target: ["es2020", "edge88", "firefox78", "chrome87", "safari13.1"],
rollupOptions: {
output: {
chunkFileNames: isDev ? "[name].js" : "[name]-[hash].js",
},
},
},
// Development server
server: {
port: 3000,
open: true,
},
};
});