前端性能优化：从慢如龟速到飞一般的感觉

前端性能优化：从慢如龟速到飞一般的感觉

毒舌时刻

哟，前端性能优化？这不是每个开发者都挂在嘴边的口头禅吗？

"我的代码优化了！"——结果打开页面还是要等3秒，
"我用了懒加载！"——结果图片还是要等半天，
"我做了代码分割！"——结果打包后还是10MB+。

别逗了，真正的性能优化不是嘴上说说，而是要真刀真枪地干！

为什么你需要这个？

• 用户体验：页面加载快，用户才会愿意多停留
• SEO排名：Google等搜索引擎会优先收录加载快的网站
• 转化率：加载速度直接影响用户购买决策
• 服务器成本：优化后可以减少服务器带宽和资源消耗

反面教材

// 反面教材：直接在组件中导入所有依赖 import React from 'react'; import { Button, Card, Input, Table, Modal, ... } from 'antd'; import { LineChart, BarChart, PieChart, ... } from 'recharts'; import { format, parse, isValid, ... } from 'date-fns'; function App() { // 直接加载所有数据，不管用户是否需要 const [data, setData] = useState([]); useEffect(() => { // 一次性请求所有数据 fetch('https://api.example.com/all-data') .then(res => res.json()) .then(setData); }, []); return ( <div> {/* 直接渲染所有组件，不管是否在视口中 */} {data.map(item => ( <Card key={item.id}> <img src={item.image} alt={item.title} /> <h3>{item.title}</h3> <p>{item.description}</p> </Card> ))} </div> ); }

正确的做法

// 正确的做法：按需导入和懒加载 import React, { useState, useEffect, Suspense } from 'react'; import { Button } from 'antd'; import { format } from 'date-fns'; // 懒加载大型组件 const ChartComponent = React.lazy(() => import('./ChartComponent')); const DataTable = React.lazy(() => import('./DataTable')); function App() { const [data, setData] = useState([]); const [visibleData, setVisibleData] = useState([]); const [page, setPage] = useState(1); const pageSize = 10; // 分页加载数据 useEffect(() => { fetch(`https://api.example.com/data?page=${page}&pageSize=${pageSize}`) .then(res => res.json()) .then(newData => { setData(prev => [...prev, ...newData]); setVisibleData(newData); }); }, [page]); // 图片懒加载 const handleImageLoad = (img) => { img.classList.add('loaded'); }; return ( <div> <Button onClick={() => setPage(prev => prev + 1)}>加载更多</Button> {/* 虚拟滚动，只渲染可视区域内的元素 */} <div className="virtual-scroll"> {visibleData.map(item => ( <Card key={item.id}> <img src={item.thumbnail} >