我管你这那得，前端优化密码得

前端彭于晏，喂自己袋盐

面试官：你在前端项目中做了哪些优化？

我（满头大汗，支支吾吾）："我...我...先那样，再这样..."

面试官：？？？

我：优化？我密码都不记得，代码是我写的，但优化好像不是我搞的...

我直接把简历糊他脸上："这工作我不要了！！"

后来，我刷到了俺自己写的这篇文章，再去面试：

面试官（趾高气扬）：你在前端项目中做了哪些优化？说！

我（淡定微笑，如天皇驾临）：一二三四，听我细细道来...

面试官：去密码得，你坐我位置得了！！

一、资源加载优化

1.1 静态资源压缩与合并

使用 Vite / Next.js 内置优化
- Vite 默认开启 esbuild 构建，速度快，体积小
- 可进一步配置 vite.config.ts，开启 gzip 压缩、拆分 chunk

1.2 图片优化

1.2.1 使用 WebP 替代 PNG / JPG

特性	描述
更小体积	相同质量下 WebP 比 JPG 小约 25%，比 PNG 小约 30%
高质量	视觉质量接近无损
支持透明度	可替代 PNG 使用场景
支持动画	替代 GIF 动图
浏览器兼容	Chrome, Firefox, Safari 14+, Edge 均支持

1.2.2 图标资源使用 SVG

可控性强、体积小、可动态样式控制
推荐使用 iconfont 或自建 svg sprite

1.2.3 图片懒加载

ini 复制代码

html
复制编辑
<img src="banner.webp" loading="lazy" alt="banner图" />

浏览器原生支持 loading="lazy"，不需额外 JS

1.2.4 构建期图片压缩

使用插件如：
- vite-plugin-imagemin
- webpack-image-loader

💡 小贴士：开发中一定要区分环境，便于调试，.env.dev,.env.prod。图片使用CDN加速，上传到CDN，在正式站中。

1.3 字体优化

使用 .woff2 格式，兼容性好，体积最小
使用 Fontmin 等工具子集化，仅保留必要字符
注意字体版权问题，尽量从设计要字体源文件

二、构建优化（Vite / Webpack / Turbopack）

2.1 代码分割（Code Splitting）

动态 import() 按需加载模块
路由懒加载（React.lazy、Vue 异步组件）

kotlin 复制代码

ts
复制编辑
// Vite 手动拆分大依赖
manualChunks(id) {
  if (id.includes('node_modules')) {
    if (id.includes('antd')) return 'vendor_antd';
    if (id.includes('echarts')) return 'vendor_echarts';
    return 'vendor';
  }
}

2.2 Tree Shaking

清除未使用代码（必须使用 ES Module 格式）
Vite 和 Webpack 默认支持

2.3 缓存与版本控制

文件名加 hash，例如 main.abc123.js
浏览器根据 hash 控制缓存更新
设置 HTTP 缓存头（Cache-Control、ETag）

三、首屏加载优化

3.1 SSR / SSG

使用 Next.js、Nuxt.js 等框架进行服务端渲染 / 静态生成
减少白屏时间，提升 SEO

3.2 骨架屏（Skeleton）

首屏重要模块使用骨架屏占位，提高感知速度

javascript 复制代码

tsx
复制编辑
{loading ? <Skeleton /> : <ActualComponent />}

3.3 预加载与预获取

方法	描述
Preload	提前加载关键资源（JS/CSS/字体）
Prefetch	空闲时加载未来可能使用资源

使用 <link rel="preload">, <link rel="prefetch">

四、代码层优化

4.1 虚拟滚动 / 虚拟列表

适用于百万级数据渲染
推荐库：
- react-window
- react-virtualized
- vue-virtual-scroller

4.2 减少 DOM 操作

批量 DOM 插入，避免频繁回流重绘
React / Vue 本身有 diff 算法优化
点击事件采用事件委派

4.3 防抖与节流

防抖（debounce）：如输入搜索框
节流（throttle）：如滚动监听

javascript 复制代码

ts
复制编辑
const handleScroll = useThrottle(() => {
  // 执行逻辑
}, 300)

使用 lodash.debounce / lodash.throttle

4.4 React 性能优化技巧

React.memo 避免无效渲染
useCallback 缓存函数引用
useMemo 缓存计算结果

4.5 请求缓存

react query 使用react query对一些配置项进行请求缓存

4.6 代码规范

eslint+prettier 进行代码风格统一
husky 进行代码提交commit校验规范

五、用户体验优化

加载中状态 <Spin />、空状态 <Empty />、失败提示 <Alert />
请求失败使用错误边界（ErrorBoundary）处理
全局降级兜底逻辑处理（如 fallback UI）

六、其他推荐优化实践

6.1 使用现代框架与构建工具

React + Vite
Vue3 + Vite
Next.js (支持 SSR + ISR + CDN)
Nuxt3

6.2 单元测试 & CI 校验

使用 Jest / Vitest 编写单元测试
使用 Husky + lint-staged + Commitlint 规范提交
配合 GitHub Actions 做自动测试 & 构建检查

6.3 第三方库得合理运用

有一些场景需要合理得使用第三方库，比如一些常见库，echarts，swipper,md5,dayjs等等，合理运用当前项目所需要用到的第三方库很重要，这个点得话来源于经验的积累。

写在最后

感觉写了啥，又感觉什么都没写。。。

如果你喜欢这篇文章，欢迎点赞收藏，面试不再支支吾吾，码住，必成大器！