前端性能优化工程化实践 React 与 Vue 通用

关键实践代码分割：按路由与模块进行动态加载，减少首屏体积。Tree Shaking：仅打包实际使用的 ESM 导出。HTTP 缓存：静态资源带哈希文件名并设置长缓存；HTML 短缓存。图片优化：使用 WebP/AVIF、`srcset` 与 `sizes` 自适应。懒加载：图片与组件懒加载，降低首屏开销。React 示例（已在稳定 API 范围内验证）import React, { Suspense } from 'react';

const UserPage = React.lazy(() => import('./UserPage'));

export default function App() {

return (

<Suspense fallback={<div>Loading...</div>}>

<UserPage />

</Suspense>

);

}

Vue 示例（动态导入）// Vue Router 路由级懒加载

const routes = [

{

path: '/user',

component: () => import('./views/UserPage.vue'),

},

];

缓存与命名构建产物命名：`app.[contenthash].js`、`style.[contenthash].css`。资源头：`Cache-Control: public, max-age=31536000, immutable` 对静态资源；HTML 使用 `no-cache`。图片与字体`srcset` 示例：<img src="hero-800.webp" srcset="hero-400.webp 400w, hero-800.webp 800w" sizes="(max-width: 600px) 400px, 800px" alt="hero" />