冷启动优化核心是按需加载：路由级代码分割（react.lazy/vue异步组件）、第三方库路径导入、vendor分包、条件加载脚本、微前端预加载与缓存协同。
核心思路是：不让冷启动时加载任何非首屏必需的脚本，把其余逻辑推迟到用户真正触发行为、进入新路由或满足特定条件时再加载。
路由级代码分割（最直接有效）
这是精简冷启动体积的首要手段。将每个页面（或功能模块）拆成独立的 JS Chunk，只让首页对应的部分参与初始打包。
- React 项目中用 React.lazy + Suspense 包裹路由组件，配合 Webpack 或 Vite 的动态 import
- Vue 项目中用 defineAsyncComponent 或路由配置里的
component: () => import('./About.vue') - 确保构建工具未禁用代码分割（如 Webpack 的
splitChunks默认开启，Vite 的build.rollupOptions.output.manualChunks可进一步优化）
第三方库与大组件的按需引入
像图表库（ECharts、Chart.js）、富文本编辑器（Tiptap、Slate）、UI 组件库（如 originui）若整包引入，会显著膨胀主包。应避免 import { Button, Table, Modal } from 'originui' 这类写法。
- 改用路径导入：例如
import Button from 'originui/lib/button'，前提是库支持 ES 模块导出 - 对 originui 这类带注册表的方案，直接通过动态路径加载组件，如
dynamic(() => import(`@/registry/ui/accordion`))，完全绕过未使用组件的打包 - 将
node_modules中稳定不变的依赖单独抽为vendorChunk，利用浏览器长期缓存，降低后续加载压力
脚本级条件加载（适配设备或能力）
并非所有脚本都该在冷启动时执行——尤其是桌面专属广告、旧浏览器 polyfill、或仅在交互后才需要的分析脚本。
- 用
window.innerWidth >= 800判断是否为桌面端，只在此条件下插入广告脚本 - 用
'IntersectionObserver' in window检测原生支持，缺失时才加载 polyfill - 用
loadJS等轻量工具异步加载非关键脚本，并支持回调和顺序控制，避免阻塞渲染
微前端场景下的预加载与缓存协同
若应用采用 icestark 等微前端架构，冷启动体积还取决于主应用是否“拉取全部子应用”。可通过策略性预加载减少感知延迟，而非全量加载。
- 设置
prefetch: ['dashboard']，仅预加载用户大概率访问的微应用资源 - 对已加载过的微应用启用
cached={true}，切换回该应用时跳过重复 fetch 和执行 - 避免在主应用初始化阶段就调用所有子应用的
loadMicroApp，改为按需触发
