性能优化

export default defineConfig({
  vite: {
    build: {
      rollupOptions: {
        treeshake: {
          moduleSideEffects: false // 移除无副作用的未使用代码
        }
      }
    }
  }
})

// ✅ 好：tree-shakable
import { Button, Card } from '@heroui/react'

export const good = <Button>好的写法</Button>

// ❌ 差：命名空间导入，打包器无法 tree-shake，整库进产物
import * as HeroUI from '@heroui/react'

export const bad = <HeroUI.Button>差的写法</HeroUI.Button>

import { defineTemplate, type TemplateProps } from '@karinjs/template-react'
import { lazy, Suspense } from 'react'

// 懒加载图表库
const Chart = lazy(() => import('react-chartjs-2').then((m) => ({ default: m.Line })))

interface StatsData {
  labels: string[]
  values: number[]
}

const Stats = ({ data }: TemplateProps<StatsData>) => (
  <Suspense fallback={<div>加载中...</div>}>
    <Chart data={{ labels: data.labels, datasets: [{ data: data.values }] }} />
  </Suspense>
)

export default defineTemplate({
  component: Stats
})

export default defineConfig({
  vite: ({ command }) =>
    command === 'build'
      ? {
          plugins: [
            visualizer({
              filename: 'dist/stats.html',
              open: true,
              gzipSize: true,
              brotliSize: true
            })
          ]
        }
      : {}
})

export default defineConfig({
  build: {
    rollupOptions: {
      external: ['react', 'react-dom', 'react/jsx-runtime'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      }
    }
  }
})

export default defineConfig({
  vite: {
    plugins: [
      compression({
        algorithm: 'brotliCompress',
        ext: '.br',
        threshold: 1024 // 只压缩 > 1KB 的文件
      })
    ],
    build: {
      minify: 'esbuild',
      cssMinify: 'lightningcss'
    }
  }
})

import { defineTemplate, type TemplateProps } from '@karinjs/template-react'
import { lazy, Suspense } from 'react'

const HeavyChart = lazy(() => import('../../components/HeavyChart'))
const HeavyTable = lazy(() => import('../../components/HeavyTable'))

interface DashboardData {
  showChart: boolean
  showTable: boolean
}

const Dashboard = ({ data }: TemplateProps<DashboardData>) => (
  <div>
    {data.showChart && (
      <Suspense fallback={<div>加载图表...</div>}>
        <HeavyChart />
      </Suspense>
    )}
    {data.showTable && (
      <Suspense fallback={<div>加载表格...</div>}>
        <HeavyTable />
      </Suspense>
    )}
  </div>
)

export default defineTemplate({
  component: Dashboard
})

import React from 'react'

interface UserCardProps {
  name: string
  avatar: string
}

export const UserCard = React.memo<UserCardProps>(({ name, avatar }) => {
  console.log('UserCard 渲染')

  return (
    <div className="flex items-center gap-3">
      <img src={avatar} alt={name} className="size-12 rounded-full" />
      <span className="font-medium">{name}</span>
    </div>
  )
})

import { useMemo } from 'react'

interface Item {
  score: number
}
interface Props {
  items: Item[]
}

function Component({ items }: Props) {
  const total = useMemo(() => {
    console.log('计算总分')
    return items.reduce((sum, item) => sum + item.score, 0)
  }, [items])

  return <div>总分: {total}</div>
}

import { defineTemplate, type TemplateProps } from '@karinjs/template-react'
import { List, type RowComponentProps } from 'react-window'

interface User {
  id: string
  name: string
}

interface ListData {
  users: User[]
}

const Row = ({ index, style, users }: RowComponentProps<{ users: User[] }>) => (
  <div style={style} className="px-4 py-2 border-b">
    {users[index].name}
  </div>
)

const UserList = ({ data }: TemplateProps<ListData>) => (
  <List rowComponent={Row} rowCount={data.users.length} rowHeight={48} rowProps={{ users: data.users }} style={{ height: 600 }} />
)

export default defineTemplate({
  component: UserList
})

import React from 'react'

const OptimizedImage: React.FC<{ src: string; alt: string }> = ({ src, alt }) => (
  <picture>
    <source srcSet={`${src}?format=avif`} type="image/avif" />
    <source srcSet={`${src}?format=webp`} type="image/webp" />
    <img src={src} alt={alt} loading="lazy" decoding="async" className="w-full" />
  </picture>
)

export default defineConfig({
  vite: {
    css: {
      postcss: {
        plugins: [
          purgecss({
            content: ['./ktr/template/**/*.{tsx,ts}'],
            safelist: [/^bg-/, /^text-/, /^hover:/] // 保留动态类名
          })
        ]
      }
    }
  }
})

export default defineConfig({
  vite: {
    build: {
      cssMinify: 'lightningcss'
    },
    css: {
      transformer: 'lightningcss'
    }
  }
})

import type { RenderPlugin } from '@karinjs/template-react'
import fs from 'node:fs'

const inlineCriticalCSS: RenderPlugin = {
  name: 'inline-critical-css',
  afterRender: (ctx) => {
    const criticalCSS = fs.readFileSync('dist/critical.css', 'utf-8')
    // afterRender 拿到的是包装前的模板片段，直接把 <style> 拼到片段前
    return `<style>${criticalCSS}</style>\n${ctx.html}`
  }
}

export default defineConfig({
  vite: {
    build: {
      cssCodeSplit: true // 每个入口生成独立 CSS
    }
  }
})

export default defineConfig({
  vite: {
    optimizeDeps: {
      include: ['react', 'react-dom', '@heroui/react', 'framer-motion']
    }
  }
})

export default defineConfig({
  vite: {
    server: {
      watch: {
        ignored: ['**/node_modules/**', '**/dist/**', '**/.git/**', '**/coverage/**']
      }
    }
  }
})

import { defineTemplate } from '@karinjs/template-react'

const Component = () => <div>User Card</div>

export default defineTemplate({
  component: Component
})

// HMR 边界
if (import.meta.hot) {
  import.meta.hot.accept()
}

export default defineConfig({
  vite: {
    server: {
      fs: {
        strict: true
      },
      preTransformRequests: true
    }
  }
})

import { defineConfig } from '@karinjs/template-react'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  vite: {
    plugins: [
      visualizer({ open: true }) // 1. 分析体积
    ],
    build: {
      rollupOptions: {
        output: {
          manualChunks(id) {
            // 2. 拆分第三方库（vite 8 / rolldown 的 manualChunks 是函数形式）
            if (id.includes('node_modules/react')) return 'vendor'
            if (id.includes('@heroui')) return 'ui'
          }
        }
      }
    }
  }
})

import { lazy } from 'react'

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

import { defineTemplate, type TemplateProps } from '@karinjs/template-react'
import React from 'react'
import { List, type RowComponentProps } from 'react-window'

interface User {
  id: string
  name: string
  avatar: string
}

interface ListData {
  users: User[]
}

// 1. memo 避免重渲染
const UserRow = React.memo<{ user: User }>(({ user }) => (
  <div className="flex items-center gap-3 px-4 py-2">
    <img src={user.avatar} alt="" className="size-10 rounded-full" />
    <span>{user.name}</span>
  </div>
))

// 2. 虚拟列表
const Row = ({ index, style, users }: RowComponentProps<{ users: User[] }>) => (
  <div style={style}>
    <UserRow user={users[index]} />
  </div>
)

const UserList = ({ data }: TemplateProps<ListData>) => (
  <List rowComponent={Row} rowCount={data.users.length} rowHeight={56} rowProps={{ users: data.users }} style={{ height: 600 }} />
)

export default defineTemplate({
  component: UserList
})

import { defineConfig } from '@karinjs/template-react'

export default defineConfig({
  vite: {
    build: {
      cssMinify: 'lightningcss' // 3. 使用更好的压缩
    }
  }
})

import { defineConfig } from '@karinjs/template-react'

export default defineConfig({
  vite: {
    // 1. 预构建常用依赖
    optimizeDeps: {
      include: ['react', 'react-dom', '@heroui/react', 'framer-motion', 'date-fns']
    },
    // 2. 减少监听范围
    server: {
      watch: {
        ignored: ['**/node_modules/**', '**/dist/**']
      }
    },
    // 3. 关闭不必要的功能
    build: {
      sourcemap: false
    }
  }
})

import { defineTemplate, type TemplateProps } from '@karinjs/template-react'
import { useMemo } from 'react'

interface Data {
  users: Array<{ id: string; score: number }>
}

const Template = ({ data }: TemplateProps<Data>) => {
  // 1. 缓存计算结果
  const sortedUsers = useMemo(() => [...data.users].sort((a, b) => b.score - a.score), [data.users])

  return (
    <div>
      {sortedUsers.map((user) => (
        // 2. 使用 key 优化 reconciliation
        <div key={user.id}>{user.score}</div>
      ))}
    </div>
  )
}

export default defineTemplate({
  component: Template
})

import type { RenderPlugin } from '@karinjs/template-react'

// 3. 性能监控插件
const perfPlugin: RenderPlugin = {
  name: 'perf',
  beforeRender: (ctx) => {
    ;(ctx as any).__startTime = Date.now()
  },
  afterRender: (ctx) => {
    const duration = Date.now() - (ctx as any).__startTime
    if (duration > 500) {
      console.warn(`[慢渲染] ${ctx.path}: ${duration}ms`)
    }
  }
}

import React from 'react'

// 1. 响应式图片
const Avatar: React.FC<{ src: string; alt: string }> = ({ src, alt }) => (
  <picture>
    <source srcSet={`${src}?w=64&format=avif 1x, ${src}?w=128&format=avif 2x`} type="image/avif" />
    <source srcSet={`${src}?w=64&format=webp 1x, ${src}?w=128&format=webp 2x`} type="image/webp" />
    <img src={`${src}?w=64`} alt={alt} loading="lazy" decoding="async" className="size-16 rounded-full" />
  </picture>
)

import type { RenderPlugin } from '@karinjs/template-react'
import fs from 'node:fs'
import path from 'node:path'

// 2. 小图片内联（框架已内置该能力：html.assetsInlineLimit 默认 4096 字节，
//    需要更定制的规则时才用这种 afterRender 插件，比如按路径前缀区分阈值）
const inlineSmallImages: RenderPlugin = {
  name: 'inline-small-images',
  afterRender: (ctx) => {
    return ctx.html.replace(/<img[^>]+src="\/assets\/([^"]+\.(?:png|jpg|svg))"[^>]*>/g, (match, filename) => {
      const filepath = path.join(ctx.outputDir, '../assets', filename)
      if (!fs.existsSync(filepath)) return match

      const stat = fs.statSync(filepath)
      if (stat.size > 5120) return match // 只内联 < 5KB

      const ext = path.extname(filename).slice(1)
      const base64 = fs.readFileSync(filepath, 'base64')
      return match.replace(`src="/assets/${filename}"`, `src="data:image/${ext};base64,${base64}"`)
    })
  }
}

import React, { useState } from 'react'

interface User {
  id: string
  name: string
}

// 1. memo + 原始值 props
const UserCard = React.memo<{ user: User }>(({ user }) => {
  console.log('UserCard 渲染')
  return <div>{user.name}</div>
})

// 2. 回调使用 useCallback
const UserList: React.FC<{ users: User[] }> = ({ users }) => {
  const [selected, setSelected] = useState<string | null>(null)

  const handleSelect = React.useCallback((id: string) => {
    setSelected(id)
  }, [])

  return (
    <div>
      {users.map((user) => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  )
}

import { defineConfig } from '@karinjs/template-react'

export default defineConfig({
  vite: {
    build: {
      reportCompressedSize: true, // 报告压缩后大小
      chunkSizeWarningLimit: 500 // 超过 500KB 警告
    }
  }
})

import type { RenderPlugin } from '@karinjs/template-react'
import fs from 'node:fs'
import path from 'node:path'

const metricsPlugin: RenderPlugin = {
  name: 'metrics',
  enforce: 'post',
  afterRender: async (ctx) => {
    const metrics = {
      path: ctx.path,
      htmlSize: ctx.html.length,
      timestamp: Date.now()
    }

    const metricsFile = path.join(ctx.outputDir, 'metrics.jsonl')
    await fs.promises.appendFile(metricsFile, JSON.stringify(metrics) + '\n')
  }
}

import { defineConfig } from '@karinjs/template-react'

export default defineConfig({
  vite: {
    build: {
      rollupOptions: {
        output: {
          assetFileNames: (assetInfo) => {
            // 检查文件大小
            if (assetInfo.name?.endsWith('.css')) {
              console.log(`CSS: ${assetInfo.name}`)
            }
            return 'assets/[name]-[hash][extname]'
          }
        }
      }
    }
  }
})