性能优化

// 路由级懒加载
const routes = [
  { path: '/dashboard', component: () => import('./Dashboard.vue') }
]

// React 组件懒加载
const HeavyChart = React.lazy(() => import('./HeavyChart'))

// 动态导入 — 体积大但不一定用到的模块
import('./toastify').then((module) => {
  module.toast('Hello World')
})

<!-- 关键 CSS 内联，非关键 CSS 异步加载 -->
<style>/* 关键 CSS 内联在 head */</style>
<link rel="preload" href="non-critical.css" as="style"
      onload="this.rel='stylesheet'">

<!-- 或使用 media 属性延迟 -->
<link rel="stylesheet" href="print.css" media="print">

/* font-display: swap 避免 FOIT（不可见文本闪烁） */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
}

// 路由懒加载 — 减少首屏 JS 体积
const routes = [
  { path: '/dashboard', component: () => import('./Dashboard.vue') }
]

// 异步组件 — 按需加载重型组件
const HeavyChart = defineAsyncComponent(
  () => import('./HeavyChart.vue')
)

// shallowRef — 大型数据避免深层代理开销
const bigList = shallowRef<Item[]>([])

// v-once — 纯静态内容跳过更新
// <span v-once>{{ initialValue }}</span>

// React.lazy + Suspense — 代码分割
const HeavyChart = React.lazy(() => import('./HeavyChart'))

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <HeavyChart />
    </Suspense>
  )
}

// useMemo — 缓存计算结果，减少重渲染开销
const processed = useMemo(
  () => heavyCalc(data), [data]
)

// React.memo — 跳过 props 未变的重渲染
const Item = React.memo(({ value }) => <li>{value}</li>)

// v-memo — 依赖不变则跳过更新，减少重渲染
// <div v-for="item in list" :key="item.id"
//      v-memo="[item.selected]">
//   <ExpensiveComponent :item="item" />
// </div>

// shallowRef — 只追踪 .value，不深层代理
const data = shallowRef({ items: [] })
// 嵌套修改不触发更新，需整体替换
data.value = { items: newData }

// effectScope — 批量管理副作用，一次性清理
const scope = effectScope()
scope.run(() => {
  watch(source, callback)
  // ...更多 watch/computed
})
scope.stop() // 一次性释放所有

// useTransition — 标记低优先级更新，不阻塞用户输入
const [isPending, startTransition] = useTransition()

function handleSearch(query) {
  startTransition(() => {
    setSearchResults(heavyFilter(query))
  })
  // 输入框立即响应，搜索结果延迟更新
}

// useDeferredValue — 延迟渲染某个值
const deferredQuery = useDeferredValue(query)
// 搜索列表用 deferredQuery，输入框用 query

// flushSync — 强制同步更新（慎用）
flushSync(() => setCount(c => c + 1))
// 之后的代码能访问更新后的 DOM

// Vue 3.3+ 流式 SSR
import { renderToWebStream } from 'vue/server-renderer'

// Nuxt 3 默认启用流式渲染
// 组件级 Suspense 边界实现分段传输

// React 18 Streaming SSR
import { renderToPipeableStream } from 'react-dom/server'

renderToPipeableStream(<App />, {
  bootstrapScripts: ['/main.js'],
  onShellReady() {
    // HTML shell 就绪，开始流式传输
    pipe(res)
  }
})

// Selective Hydration — Suspense 边界实现
<Suspense fallback={<Loading />}>
  <Comments /> {/* 延迟水合 */}
</Suspense>