docs/api/start.md
Start the qiankun framework. This function initializes the micro-frontend system and enables automatic routing-based micro application loading.
function start(opts?: StartOpts): void
StartOptsinterface StartOpts {
prefetch?: boolean | 'all' | string[] | ((apps: RegistrableApp[]) => { criticalAppNames: string[]; minorAppsName: string[] });
sandbox?: boolean | { strictStyleIsolation?: boolean; experimentalStyleIsolation?: boolean; };
singular?: boolean;
urlRerouteOnly?: boolean;
// ... other single-spa start options
}
| Option | Type | Default | Description |
|---|---|---|---|
prefetch | boolean | 'all' | string[] | Function | true | Resource prefetch strategy |
sandbox | boolean | SandboxOpts | true | Sandbox isolation configuration |
singular | boolean | true | Whether only one micro app can be mounted at a time |
urlRerouteOnly | boolean | true | Whether to trigger routing only on URL changes |
import { registerMicroApps, start } from 'qiankun';
// Register micro apps first
registerMicroApps([
{
name: 'react-app',
entry: '//localhost:7100',
container: '#subapp-viewport',
activeRule: '/react',
},
{
name: 'vue-app',
entry: '//localhost:7101',
container: '#subapp-viewport',
activeRule: '/vue',
},
]);
// Start qiankun
start();
start({
prefetch: false, // Disable prefetch
sandbox: true, // Enable sandbox
singular: true, // Only one app at a time
urlRerouteOnly: true, // Route only on URL changes
});
start({
sandbox: {
strictStyleIsolation: true, // Enable strict style isolation
experimentalStyleIsolation: true, // Enable experimental style isolation
}
});
start({
prefetch: 'all', // Prefetch all micro apps
});
// Or prefetch specific apps
start({
prefetch: ['react-app', 'vue-app'], // Only prefetch these apps
});
// Or custom prefetch function
start({
prefetch: (apps) => ({
criticalAppNames: ['dashboard', 'user-center'], // Critical apps to prefetch immediately
minorAppsName: ['analytics', 'settings'], // Minor apps to prefetch later
})
});
// Disable prefetch completely
start({ prefetch: false });
// Enable default prefetch behavior
start({ prefetch: true });
// Prefetch all registered micro apps
start({ prefetch: 'all' });
// Prefetch only specified apps
start({
prefetch: ['critical-app1', 'critical-app2']
});
start({
prefetch: (apps) => {
// Custom logic to determine which apps to prefetch
const criticalApps = apps
.filter(app => app.name.includes('critical'))
.map(app => app.name);
const minorApps = apps
.filter(app => !app.name.includes('critical'))
.map(app => app.name);
return {
criticalAppNames: criticalApps, // Prefetch immediately
minorAppsName: minorApps, // Prefetch when idle
};
}
});
// Enable basic sandbox
start({ sandbox: true });
// Disable sandbox (not recommended)
start({ sandbox: false });
start({
sandbox: {
strictStyleIsolation: true, // Shadow DOM based style isolation
experimentalStyleIsolation: true, // Scoped CSS based style isolation
}
});
start({
singular: false, // Allow multiple apps to mount simultaneously
urlRerouteOnly: false, // Trigger routing on both URL and programmatic changes
});
// ✅ Correct order
registerMicroApps([...]);
start();
// ❌ Wrong order
start();
registerMicroApps([...]); // This won't work properly
const startOpts = {
prefetch: process.env.NODE_ENV === 'production' ? 'all' : false,
sandbox: {
strictStyleIsolation: process.env.NODE_ENV === 'production',
},
};
start(startOpts);
// For better performance in production
start({
prefetch: (apps) => ({
criticalAppNames: ['dashboard'], // Only prefetch critical apps
minorAppsName: [], // Don't prefetch minor apps
}),
singular: true, // Prevent memory issues
sandbox: {
strictStyleIsolation: false, // Use lightweight style isolation
experimentalStyleIsolation: true,
},
});
if (process.env.NODE_ENV === 'development') {
start({
prefetch: false, // Faster development reload
sandbox: false, // Easier debugging
singular: false, // More flexible development
});
} else {
start({
prefetch: 'all', // Better user experience
sandbox: true, // Better isolation
singular: true, // Stable performance
});
}
import { registerMicroApps, start } from 'qiankun';
let isQiankunStarted = false;
function startQiankunWithLoading() {
if (isQiankunStarted) return;
showGlobalLoading();
registerMicroApps([...], {
beforeLoad: (app) => {
console.log(`Loading ${app.name}...`);
},
afterMount: (app) => {
console.log(`${app.name} mounted`);
hideGlobalLoading();
},
});
start({
prefetch: 'all',
sandbox: true,
});
isQiankunStarted = true;
}
function startQiankunSafely() {
try {
registerMicroApps([...]);
start({
prefetch: 'all',
sandbox: true,
});
console.log('Qiankun started successfully');
} catch (error) {
console.error('Failed to start qiankun:', error);
// Fallback to traditional routing or show error page
window.location.href = '/fallback';
}
}
import { isRuntimeCompatible } from 'qiankun';
if (isRuntimeCompatible()) {
registerMicroApps([...]);
start();
} else {
console.warn('Browser not compatible with qiankun');
// Fallback implementation
initTraditionalRouting();
}
// ❌ Bad: Multiple calls
start();
start(); // This will be ignored
// ✅ Good: Single call
start();
// ✅ Correct order
registerMicroApps([...]); // 1. Register apps first
start(); // 2. Then start
// ❌ Wrong order - apps won't be registered properly
start();
registerMicroApps([...]);
// ⚠️ Be careful with 'all' in large applications
start({ prefetch: 'all' }); // Might impact initial load performance
// ✅ Better: Selective prefetch
start({
prefetch: ['critical-app1', 'critical-app2']
});
registerMicroApps([
{ name: 'product-catalog', entry: '//catalog.example.com', activeRule: '/products' },
{ name: 'shopping-cart', entry: '//cart.example.com', activeRule: '/cart' },
{ name: 'user-account', entry: '//account.example.com', activeRule: '/account' },
]);
start({
prefetch: (apps) => ({
criticalAppNames: ['shopping-cart'], // Always prefetch cart
minorAppsName: ['user-account'], // Prefetch account when idle
}),
sandbox: true,
singular: true,
});
start({
prefetch: false, // Don't prefetch - admin tools are used on demand
sandbox: {
strictStyleIsolation: true, // Prevent style conflicts between admin tools
},
singular: false, // Allow multiple admin tools open simultaneously
});
const tenantId = getCurrentTenantId();
start({
prefetch: [`tenant-${tenantId}-dashboard`], // Only prefetch current tenant's apps
sandbox: true, // Isolate tenant data
singular: true,
});