JavaScript动态导入（import()）可按需加载主题资源，提升首屏性能：1. 将主题拆分为独立CSS文件或JS模块；2. 运行时根据用户选择或系统偏好（prefers-color-scheme）动态加载对应主题；3. CSS方式插入link标签，JS方式注入CSS变量并持久化至localStorage；4. 路径须静态可分析，推荐白名单校验主题名。
JavaScript 中动态导入（import()）可以实现主题配色方案的按需加载，避免一次性打包所有主题 CSS 或主题配置，提升首屏性能并减少初始包体积。核心思路是：**根据用户选择或系统偏好，运行时动态加载对应主题的样式资源或配置对象，再注入页面或更新应用状态。**
1. 主题资源按文件组织，支持动态加载
将每个主题单独写成一个 CSS 文件（如 theme-dark.css、theme-blue.css）或 JS 模块（导出颜色变量对象），确保它们可被 import() 正确解析。
- CSS 方式：用
import()加载后，创建<link>插入<head> - JS 配置方式：每个主题模块导出一个颜色对象（如
{ primary: '#3b82f6', bg: '#0f172a' }），供组件或 CSS-in-JS 使用
2. 动态加载并切换 CSS 主题
以下是一个轻量切换 CSS 主题的示例：
async function applyTheme(themeName) {
// 移除旧主题 link（可选）
const oldLink = document.querySelector('link[data-theme]');
if (oldLink) oldLink.remove();
// 动态加载新主题 CSS
await import(`./themes/${themeName}.css`);
// 创建并插入新 link（注意：import('./xxx.css') 在现代构建工具中通常会自动注入，但可控性差；更推荐手动控制）
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = `/themes/${themeName}.css`;
link.setAttribute('data-theme', themeName);
document.head.appendChild(link);
}
⚠️ 注意：直接 import('./x.css') 的行为依赖构建工具（如 Vite、Webpack）。Vite 默认会将 CSS 自动注入并支持 HMR；Webpack 需启用 style-loader 或使用 mini-css-extract-plugin 的 runtime 支持。生产环境建议用 fetch + insertRule 或预编译为内联 CSS 变量更可控。
立即学习“Java免费学习笔记（深入）”；
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
3. 动态加载主题配置对象（推荐用于 CSS 变量 / Styled Components）
把主题定义为 JS 模块，更灵活且类型友好：
// themes/dark.js
export default {
primary: '#60a5fa',
bg: '#1e293b',
text: '#f1f5f9',
border: '#334155'
};
// themes/light.js
export default {
primary: '#3b82f6',
bg: '#f8fafc',
text: '#1e293b',
border: '#cbd5e1'
};
在运行时加载并应用：
async function setTheme(themeName) {
try {
const theme = await import(`./themes/${themeName}.js`).then(m => m.default);
// 写入 CSS 自定义属性（:root）
Object.entries(theme).forEach(([key, value]) => {
document.documentElement.style.setProperty(`--${key}`, value);
});
// 同时可持久化到 localStorage 或更新 Context
localStorage.setItem('preferred-theme', themeName);
} catch (err) {
console.error('Failed to load theme:', err);
}
}
4. 结合系统偏好与用户选择做智能 fallback
首次加载时可先读取 prefers-color-scheme，再动态加载对应主题，并允许用户覆盖：
function initTheme() {
const saved = localStorage.getItem('preferred-theme');
const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const defaultTheme = saved || (systemDark ? 'dark' : 'light');
setTheme(defaultTheme);
}
// 监听系统主题变化（可选）
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (!localStorage.getItem('preferred-theme')) {
setTheme(e.matches ? 'dark' : 'light');
}
});
不复杂但容易忽略：动态导入路径必须是静态可分析的字符串（不能是拼接的变量），所以 import(`./themes/${theme}.js`) 是合法的，但 import(basePath + theme + '.js') 会导致构建失败。确保路径结构固定、主题名受控（如白名单校验）。
