【架构实战】前端性能优化：SSR/懒加载/代码分割

一、前端性能优化概述

前端性能直接影响用户体验：关键指标：- FCP（首次内容绘制）：<1.8s- LCP（最大内容绘制）：<2.5s- TTI（可交互时间）：❤️.8s- FID（首次输入延迟）：<100ms## 二、SSR服务端渲染### 1. Next.js SSRjavascript// pages/index.js - 服务端渲染export async function getServerSideProps() { const data = await fetch('https://api.example.com/data').then(r => r.json()); return { props: { data } };}export default function Home({ data }) { return ( <div> <h1>{data.title}</h1> <ProductList products={data.products} /> </div> );}### 2. 静态生成（SSG）javascript// pages/products/[id].js - 静态生成export async function getStaticPaths() { const products = await fetchProducts(); return { paths: products.map(p => ({ params: { id: p.id } })), fallback: 'blocking' // 新页面在首次访问时生成 };}export async function getStaticProps({ params }) { const product = await fetchProduct(params.id); return { props: { product }, revalidate: 60 // 每60秒重新生成 };}## 三、懒加载### 1. 路由懒加载javascript// React Router懒加载import { lazy, Suspense } from 'react';import { BrowserRouter, Routes, Route } from 'react-router-dom';const Home = lazy(() => import('./pages/Home'));const Product = lazy(() => import('./pages/Product'));const Cart = lazy(() => import('./pages/Cart'));function App() { return ( <BrowserRouter> <Suspense fallback={<Loading />}> <Routes> <Route path="/" element={<Home />} /> <Route path="/product/:id" element={<Product />} /> <Route path="/cart" element={<Cart />} /> </Routes> </Suspense> </BrowserRouter> );}### 2. 图片懒加载javascript// 使用原生懒加载<img src="image.jpg" loading="lazy" alt="..." />// 使用Intersection Observerconst imageObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; imageObserver.unobserve(img); } });});document.querySelectorAll('img[data-src]').forEach(img => { imageObserver.observe(img);});### 3. 组件懒加载javascript// 弹窗组件懒加载const Modal = lazy(() => import('./Modal'));function App() { const [showModal, setShowModal] = useState(false); return ( <div> <button onClick={() => setShowModal(true)}>打开弹窗</button> {showModal && ( <Suspense fallback={<Loading />}> <Modal onClose={() => setShowModal(false)} /> </Suspense> )} </div> );}## 四、代码分割### 1. Webpack配置javascript// webpack.config.jsmodule.exports = { optimization: { splitChunks: { chunks: 'all', cacheGroups: { // 提取公共依赖 vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', priority: 10 }, // 提取公共代码 common: { minChunks: 2, priority: 5, reuseExistingChunk: true } } } }};### 2. 动态导入javascript// 动态导入async function loadFeature() { if (user.isAdmin) { const { AdminPanel } = await import('./features/admin/AdminPanel'); return <AdminPanel />; } const { UserPanel } = await import('./features/user/UserPanel'); return <UserPanel />;}## 五、资源优化### 1. CSS优化css/* 关键CSS内联 */<style> .critical { color: red; }</style>/* 非关键CSS异步加载 */<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">### 2. JS优化javascript// 减少包体积// 1. 使用Tree Shakingimport { cloneDeep } from 'lodash'; // 整个lodashimport cloneDeep from 'lodash/cloneDeep'; // 只导入使用的函数// 2. 按需加载import { Button } from 'antd'; // 全部导入import Button from 'antd/lib/button'; // 按需导入### 3. 图片优化javascript// 使用WebP格式<img src="image.webp" alt="..." />// 使用srcset响应式图片<img srcset="image-320w.jpg 320w, image-640w.jpg 640w, image-1024w.jpg 1024w" sizes="(max-width: 320px) 280px, (max-width: 640px) 580px, 1000px" src="image-640w.jpg" alt="..."/>## 六、缓存策略### 1. 浏览器缓存javascript// Service Worker缓存const CACHE_NAME = 'app-v1';self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => { return response || fetch(event.request).then(fetchResponse => { return caches.open(CACHE_NAME).then(cache => { cache.put(event.request, fetchResponse.clone()); return fetchResponse; }); }); }) );});### 2. HTTP缓存头javascript// 强缓存response.setHeader('Cache-Control', 'public, max-age=31536000');response.setHeader('Expires', new Date(Date.now() + 31536000000));// 协商缓存response.setHeader('ETag', 'xxx');response.setHeader('Last-Modified', new Date());## 七、总结前端性能优化提升用户体验：-SSR：首屏渲染更快-懒加载：减少首屏加载时间-代码分割：按需加载-缓存：减少重复请求—个人观点，仅供参考