/optimize [arguments]

undefined

**后端性能：**

```bash

**数据库：**

```bash

**需要捕获的指标：**

- 加载时间/响应时间
- 可交互时间
- 打包体积
- 内存占用
- 查询耗时
- 渲染时间

undefined

**React 分析：**

```bash

undefined

// 优化前：导入整个库
import _ from 'lodash'

// 优化后：仅导入所需部分
import debounce from 'lodash/debounce'

// 或者：使用原生替代方案
const unique = [...new Set(array)]  // 替代 _.uniq(array)

// 优化前：父组件渲染时子组件也会重渲染
function ChildComponent({ items }) {
  return <div>{items.map(...)}</div>
}

// 优化后：仅在items变化时重渲染
const ChildComponent = React.memo(function ChildComponent({ items }) {
  return <div>{items.map(...)}</div>
}, (prev, next) => prev.items === next.items)

// 优化前：每次渲染都会重新创建函数
function Parent() {
  const handleClick = () => { ... }
  return <Child onClick={handleClick} />
}

// 优化后：稳定的函数引用
function Parent() {
  const handleClick = useCallback(() => { ... }, [])
  return <Child onClick={handleClick} />
}

// 优化前：全部打包进主文件
import HeavyComponent from './HeavyComponent'

// 优化后：需要时懒加载
const HeavyComponent = React.lazy(() => import('./HeavyComponent'))

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <HeavyComponent />
    </Suspense>
  )
}

// 优化前：全尺寸图片
<img src="/hero.jpg" />

// 优化后：响应式、懒加载
<img
  src="/hero-800w.webp"
  srcSet="/hero-400w.webp 400w, /hero-800w.webp 800w"
  loading="lazy"
  alt="Hero image"
/>

// 优化前：N+1查询（1次用户查询 + N次帖子查询）
users = Repo.all(User)
Enum.map(users, fn user ->
  posts = Repo.all(from p in Post, where: p.user_id == ^user.id)
  {user, posts}
end)

// 优化后：总共2次查询
users = Repo.all(User) |> Repo.preload(:posts)
Enum.map(users, fn user -> {user, user.posts} end)

-- 优化前：缓慢查询
SELECT * FROM users WHERE email = 'user@example.com';
-- 顺序扫描（5000ms）

-- 优化后：添加索引
CREATE INDEX idx_users_email ON users(email);
-- 索引扫描（2ms）

// 优化前：每次请求都执行昂贵计算
def get_popular_posts do
  # 复杂聚合查询（500ms）
  Repo.all(from p in Post, ...)
end

// 优化后：缓存5分钟
def get_popular_posts do
  Cachex.fetch(:app_cache, "popular_posts", fn ->
    result = Repo.all(from p in Post, ...)
    {:commit, result, ttl: :timer.minutes(5)}
  end)
end

// 优化前：逐个处理
Enum.each(user_ids, fn id ->
  user = Repo.get(User, id)
  send_email(user)
end)

// 优化后：批量获取
users = Repo.all(from u in User, where: u.id in ^user_ids)
Enum.each(users, &send_email/1)

// 优化前：O(n²) - 嵌套循环
function findDuplicates(arr: number[]): number[] {
  const duplicates = []
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j] && !duplicates.includes(arr[i])) {
        duplicates.push(arr[i])
      }
    }
  }
  return duplicates
}

// 优化后：O(n) - 单次遍历+Set
function findDuplicates(arr: number[]): number[] {
  const seen = new Set<number>()
  const duplicates = new Set<number>()

  for (const num of arr) {
    if (seen.has(num)) {
      duplicates.add(num)
    }
    seen.add(num)
  }

  return Array.from(duplicates)
}

undefined

```bash

**使用成果验证技能记录证据**

undefined

undefined

// 基于路由的代码分割
const routes = [
  {
    path: '/admin',
    component: lazy(() => import('./pages/Admin'))
  },
  {
    path: '/dashboard',
    component: lazy(() => import('./pages/Dashboard'))
  }
]

// 昂贵计算
const ExpensiveComponent = ({ data }) => {
  // 仅在data变化时重新计算
  const processedData = useMemo(() => {
    return data.map(item => expensiveTransform(item))
  }, [data])

  return <div>{processedData.map(...)}</div>
}

// 替代多次查询
users = Repo.all(User)
posts = Repo.all(Post)
comments = Repo.all(Comment)

// 使用关联查询和预加载
users =
  User
  |> join(:left, [u], p in assoc(u, :posts))
  |> join(:left, [u, p], c in assoc(p, :comments))
  |> preload([u, p, c], [posts: {p, comments: c}])
  |> Repo.all()

错误：花费数小时优化仅运行一次的函数
正确：优化每页加载运行10000次的函数

错误：“这可能会很慢，我先优化一下”
正确：“这确实很慢（测量耗时500ms），我需要优化”

错误：用for循环替换.map()以节省1ms
正确：减少200KB打包体积以节省1000ms

错误：移除功能以提升速度
正确：保留功能，优化实现方式

错误：“我觉得这样会更快” [修改代码]
正确：“分析工具显示这部分耗时占比80%” [测量、优化、再次测量]

// 可读性更强
const result = items
  .filter(item => item.active)
  .map(item => item.name)

// 速度更快（一次遍历而非两次）
const result = []
for (const item of items) {
  if (item.active) {
    result.push(item.name)
  }
}

undefined

**后端：**

```bash

undefined