⏱ 本页预计时间

阅读 13 分钟 · 练习 54 分钟

8.3 持续成长：实用技能清单

掌握这些实战技能，让你持续进步。

🎯

学完这节你会：

掌握性能优化实战技巧（Core Web Vitals）
快速做出技术选型决策
高效学习新技术的方法
建立个人品牌（博客、开源、分享）
了解常用资源和工具推荐

性能优化实战

Core Web Vitals 快速指南

Google 的三大核心指标：

三大指标：

LCP (Largest Contentful Paint)
- 最大内容绘制时间
- 目标：< 2.5 秒
- 影响：首屏加载体验
FID (First Input Delay)
- 首次输入延迟
- 目标：< 100 毫秒
- 影响：交互响应速度
CLS (Cumulative Layout Shift)
- 累积布局偏移
- 目标：< 0.1
- 影响：视觉稳定性

优化技巧速查表

问题	解决方案	代码示例
图片太大	使用 WebP 格式 + Next.js Image	`<Image src="/pic.webp" width={800} height={600} />`
字体闪烁	预加载字体	`<link rel="preload" as="font" href="/font.woff2" />`
JS 包太大	代码分割 + 动态导入	`const Component = dynamic(() => import('./Heavy'))`
未使用的 CSS	Tailwind JIT 模式	自动按需生成
第三方脚本慢	延迟加载	`<Script strategy="lazyOnload" src="...">`

实战案例：图片优化

问题：首页加载 10 张 PNG，每张 500KB，总共 5MB，LCP 超过 5 秒。

步骤 1：转换为 WebP


# 使用 sharp 批量转换
pnpm install -g sharp-cli
 
# 转换所有 PNG 为 WebP
sharp -i "public/images/*.png" -o "public/images/" -f webp -q 80

效果：5MB → 1.5MB（节省 70%）

步骤 2：使用 Next.js Image


// 之前：普通 img 标签
<img src="/images/hero.png" alt="Hero" />
 
// 之后：Next.js Image 组件
import Image from 'next/image'
 
<Image
  src="/images/hero.webp"
  alt="Hero"
  width={1200}
  height={600}
  priority  // 首屏图片优先加载
  placeholder="blur"  // 加载时显示模糊占位
  blurDataURL="data:image/..."  // 可选的 base64 占位图
/>

效果：

自动懒加载（非首屏图片）
自动响应式尺寸
LCP 从 5 秒降到 1.8 秒

步骤 3：生成占位图


# 生成小尺寸占位图
sharp input.webp -o placeholder.webp --resize 20

JavaScript 性能优化

问题：组件重复渲染导致卡顿。


// ❌ 问题代码：每次父组件渲染，子组件都会重新渲染
function Parent() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>增加</button>
      <ExpensiveComponent data={someData} />  {/* 每次都重新渲染 */}
    </div>
  )
}
 
// ✅ 解决方案 1：使用 React.memo
const ExpensiveComponent = React.memo(({ data }) => {
  // 只有 data 变化时才重新渲染
  return <div>...</div>
})
 
// ✅ 解决方案 2：使用 useMemo 缓存计算结果
function Parent() {
  const [count, setCount] = useState(0)
  const [data, setData] = useState(...)
 
  // 只有 data 变化时才重新计算
  const processedData = useMemo(() => {
    return expensiveCalculation(data)
  }, [data])
 
  return <ExpensiveComponent data={processedData} />
}
 
// ✅ 解决方案 3：使用 useCallback 缓存函数
function Parent() {
  const [count, setCount] = useState(0)
 
  // 函数不会每次都重新创建
  const handleClick = useCallback(() => {
    console.log('clicked')
  }, [])  // 依赖为空，函数永远不变
 
  return <Child onClick={handleClick} />
}

技术选型快速决策

决策树：我该用什么技术？

项目类型决定技术栈：

纯展示型网站（博客、作品集、落地页）
- 推荐：Next.js (SSG) + Tailwind CSS
- 原因：SEO 好、部署简单、免费（Vercel）
交互型应用（Todo、笔记、工具）
- 推荐：Next.js + Supabase + Zustand
- 原因：全栈开发快、数据库免费、状态管理简单
内容管理系统（CMS）
- 推荐：Next.js + Sanity/Contentful
- 原因：图形化后台、易于编辑
实时协作应用（聊天、文档协作）
- 推荐：Next.js + Supabase Realtime + WebSocket
- 原因：实时同步、横向扩展
电商
- 推荐：Next.js + Stripe + Vercel Commerce
- 原因：支付集成简单、SEO 优化好

常见技术对比

需求	选项 A	选项 B	推荐
状态管理	Zustand	Redux Toolkit	Zustand（简单）
数据库	Supabase	Vercel Postgres	Supabase（功能全）
样式方案	Tailwind CSS	CSS Modules	Tailwind（开发快）
表单处理	React Hook Form	Formik	React Hook Form（性能好）
图表库	Recharts	Chart.js	Recharts（React 友好）
表格	TanStack Table	react-data-grid	TanStack Table（灵活）
日期选择	react-datepicker	@mui/x-date-pickers	react-datepicker（轻量）
富文本编辑	Tiptap	Quill	Tiptap（现代化）

高效学习新技术的方法

三步学习法

步骤 1：官方教程跑一遍（1-2 小时）

不要看视频教程，直接看官方文档的 Quick Start：


1. 找官网的 "Get Started" 或 "Quick Start"
2. 复制示例代码，跑起来
3. 改几个参数，看看效果
4. 理解核心概念（3-5 个关键词）

示例：学习 Zustand


// 10 分钟跑通官方示例
import { create } from 'zustand'
 
const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 }))
}))
 
function Counter() {
  const { count, increment } = useStore()
  return <button onClick={increment}>{count}</button>
}

核心概念：create、set、state

步骤 2：做一个真实小项目（3-5 小时）

不要做 Todo List，做一个你真正需要的东西：


- 学数据库 → 做一个记账本
- 学图表 → 做一个健康数据追踪器
- 学 WebSocket → 做一个简单聊天室

关键：项目要小（3-5 小时能完成），但要实用（自己会用）。

步骤 3：写一篇教程分享（1-2 小时）

费曼学习法：教会别人是最好的学习方式。


# 我学会了 XXX 技术
 
## 为什么要学
[一句话说明]
 
## 核心概念
[3-5 个关键概念]
 
## 快速上手
[最小示例代码]
 
## 实战案例
[我做的小项目]
 
## 踩坑记录
[遇到的问题和解决方法]
 
## 总结
[一句话总结]

发到个人博客、公众号、掘金、V2EX。

学习资源优先级

资源优先级（从高到低）：

✅ 官方文档 - 最新、最准确
✅ GitHub README - 快速了解用法
✅ 官方示例仓库 - 可运行的代码
⚠️ 技术博客 - 可能过时，注意发布日期
⚠️ 视频教程 - 学习慢，但适合入门
❌ ChatGPT/AI - 可能给出过时信息，需验证

黄金规则：永远先看官方文档！

个人品牌建设

为什么要建立个人品牌？

好处：

找工作更容易：作品集 > 简历
学得更扎实：输出倒逼输入
建立人脉：分享吸引同频的人
被动收入：博客广告、付费教程、咨询
个人成就感：帮助到别人很有价值

三个渠道快速起步

1. 个人博客（必备）

用 Next.js + MDX 搭建：


# 推荐模板
npx create-next-app@latest my-blog --example blog

必须有的内容：

关于我（做什么的、联系方式）
技术文章（每月 1-2 篇）
项目展示（你做过的东西）

SEO 优化：

每篇文章加 meta description
使用 sitemap.xml
部署到自定义域名（提升专业度）

2. GitHub（展示代码能力）

策略：

做有用的小工具（不是 hello world）
README 写清楚（用途、安装、示例）
定期更新（每周至少 1 次 commit）
给别人的项目贡献 PR（建立影响力）

推荐的第一个开源项目：


把你常用的代码片段整理成一个库

例如：
- react-hooks-collection（常用 hooks）
- tailwind-components（常用组件）
- utils-library（工具函数集）

3. 技术社区（扩大影响力）

推荐平台（按优先级）：

Twitter/X - 国际影响力
- 分享每天的学习收获
- 用英文（扩大受众）
- 标签 #buildinpublic #100DaysOfCode
掘金/知乎 - 中文社区
- 深度技术文章
- 每月 2-4 篇
小红书 - 新手友好
- 图文并茂的教程
- 代码截图 + 简短说明

内容创作技巧

写作模板（10 分钟写一篇）：


# 标题：我用 XXX 解决了 YYY 问题
 
## 背景
[遇到什么问题]
 
## 解决方案
[用什么技术解决的]
 
## 代码示例
[关键代码 + 注释]
 
## 效果
[前后对比 / 数据 / 截图]
 
## 总结
[一句话总结经验]

选题技巧：

✅ 你刚解决的真实问题
✅ 新技术的快速上手教程
✅ 常见错误的解决方法
❌ 已经被写烂的主题（如”什么是闭包”）

常用资源和工具推荐

开发工具

工具	用途	推荐理由
VS Code	代码编辑器	插件丰富、性能好
Cursor	AI 代码编辑器	AI 辅助编程
Warp	终端	AI 命令提示、现代化 UI
Insomnia	API 测试	比 Postman 简洁
TablePlus	数据库客户端	支持多种数据库

设计资源

资源	类型	链接
Tailwind UI	组件库	tailwindui.com
shadcn/ui	React 组件	ui.shadcn.com
Heroicons	图标	heroicons.com
Unsplash	免费图片	unsplash.com
Coolors	配色	coolors.co

学习资源

资源	类型	适合人群
Next.js 官方文档	文档	必读
React 官方教程	教程	新手
JavaScript.info	教程	深入理解 JS
MDN Web Docs	文档	Web 标准
web.dev	文章	性能优化、SEO

社区和Newsletter

资源	类型	更新频率
JavaScript Weekly	Newsletter	每周
React Status	Newsletter	每周
CSS-Tricks	博客	每天
dev.to	社区	实时
Hacker News	新闻	实时

持续成长计划

每周成长清单：

学习（3-5 小时/周）

读 1 篇官方文档或技术文章
尝试 1 个新工具或库
解决 1 个自己的真实问题

输出（2-3 小时/周）

写 1 篇技术笔记或博客
更新 1 次 GitHub（commit 代码）
分享 1 次学习收获（Twitter/朋友圈）

复盘（30 分钟/周）

回顾本周学到了什么
记录遇到的问题和解决方法
规划下周要学的内容

年度成长里程碑

第 1-3 个月：打基础

完成 5 个小项目
写 10 篇技术博客
掌握 Next.js + TypeScript + Tailwind CSS

第 4-6 个月：深入实践

做 1 个完整的 SaaS 产品
GitHub 有 100+ stars
技术博客有 1000+ 访问量

第 7-12 个月：建立影响力

开源 1 个有用的工具库
参与 1 个知名开源项目
技术分享有 5000+ 阅读量
可能的副业收入

最后的建议

避免这些陷阱：

❌ 教程地狱：看了 100 个教程，没做过 1 个项目
- ✅ 解法：看完教程立刻动手做
❌ 完美主义：一个项目做了 3 个月还没上线
- ✅ 解法：先发布 MVP，再迭代优化
❌ 工具癖：花 80% 时间研究工具，20% 时间写代码
- ✅ 解法：够用就行，不要追求完美
❌ 孤军奋战：从不分享，从不交流
- ✅ 解法：加入社区，主动分享
❌ 目标太大：一上来就想做下一个 Facebook
- ✅ 解法：从小工具开始，解决真实问题

成长心法：

✅ 每天进步 1%：不求一夜成名，但求日积月累
✅ 做有用的东西：解决自己的问题，顺便帮到别人
✅ 保持输出：写代码、写博客、做分享
✅ 拥抱社区：给别人贡献 PR，也接受别人的帮助
✅ 享受过程：编程本身就很有趣，不要只盯着结果

记住：AI 时代，会用工具比死记硬背更重要。重点是解决问题的能力，而不是背诵 API。

恭喜完成第 8 章！ 🎉

你现在已经掌握：

✅ 高级 AI 协作技巧
✅ 从功能到系统的架构思维
✅ 性能优化、技术选型、学习方法
✅ 个人品牌建设和持续成长路径

下一步：开始你的项目，边做边学，持续分享！

学习进度0%

0/60 篇已完成