【架构实战】前端性能优化：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. 静态生成SSGjavascript// 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 srcimage.jpg loadinglazy 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 relpreload hrefstyles.css asstyle onloadthis.onloadnull;this.relstylesheet### 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 srcimage.webp alt... /// 使用srcset响应式图片img srcsetimage-320w.jpg 320w, image-640w.jpg 640w, image-1024w.jpg 1024w sizes(max-width: 320px) 280px, (max-width: 640px) 580px, 1000px srcimage-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-age31536000);response.setHeader(Expires, new Date(Date.now() 31536000000));// 协商缓存response.setHeader(ETag, xxx);response.setHeader(Last-Modified, new Date());## 七、总结前端性能优化提升用户体验-SSR首屏渲染更快-懒加载减少首屏加载时间-代码分割按需加载-缓存减少重复请求—个人观点仅供参考