几个前端性能优化的方法

一、 路由懒加载

1.Vue

// router.js
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/dashboard',
    component: () => import(/* webpackChunkName: "dashboard" */ './views/Dashboard.vue')
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

2.React

const HomePage = lazy(() => import('@/pages/Home'));  
const ProductPage = lazy(() => import('@/pages/Product'));  

// 路由配置中包裹Suspense  
<Route path="/product/:id" element={<Suspense fallback={<Loading />}><ProductPage /></Suspense>} />

二、组件懒加载

1.基本懒加载方法

// 父组件中使用
import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
);

export default {
  components: {
    AsyncComponent
  }
}

2.v-once与v-memo指令

<!-- 静态内容单次渲染 -->  
<Footer v-once />  

<!-- 根据依赖缓存模板 -->  
<div v-for="item in list" :key="item.id" v-memo="[item.id]">  
  {{ item.content }}  
</div>

三、图片优化

1.图片 → WebP

（1）Vite ：通过 vite-plugin-imagemin 插件压缩并转换图片格式

安装依赖：

npm install vite-plugin-imagemin imagemin-webp -D

配置 vite.config.js：

import { defineConfig } from 'vite';
import viteImagemin from 'vite-plugin-imagemin';

export default defineConfig({
  plugins: [
    viteImagemin({
      webp: {
        quality: 75, // 质量 0-100
      }
    })
  ]
});

在 Vue 组件中直接引用图片，构建时会自动生成 WebP 版本：

<template>
  <img src="@/assets/image.jpg" alt="示例图片">
</template>

注意 vite-plugin-imagemin插件与vite的兼容问题

（2）Webpack：通过 imagemin-webpack-plugin 转换图片

安装依赖：

npm install imagemin-webp-webpack-plugin --save-dev

配置 vue.config.js：

const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new ImageminWebpWebpackPlugin({
        config: [{
          test: /\.(jpe?g|png)$/,
          options: { quality: 75 }
        }]
      })
    ]
  }
};

2.图标 → 精灵图或字体图标

（1）精灵图（Sprites）：通过将多个小图标或图像合并到一张大图中，从而减少页面加载时的HTTP请求次数，提高网页加载速度。

<head>
    <style>
        span {
            display: inline-block;
            /* 设置盒子的尺寸和小图尺寸相同 */
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 将精灵图设置为盒子的背景图片 */
            background-image: url(./image.jpg);
            /* 背景图位置属性：改变背景图位置，想要向左移动图片：位置取负数 */
            /* 水平方向位置 垂直方向位置 */
            background-position: -756px 0;
        }
    </style>
</head>
<body>
    <!-- 精灵图的标签都用行内标签，span,b,i等 -->
    <span></span>
</body>

（2）字体图标：推荐使用 iconfont 或者 font-awesome

/* cdn引入 */
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
...
<!-- 使用 -->
<button class="site-btn icon">下载<i class="fa fa-download" aria-hidden="true"></i></button>

四、状态管理优化（Pinia）

1. 状态切片与按需加载

// stores/user.ts  
export const useUserStore = defineStore('user', {  
  state: () => ({  
    basicInfo: null, // 基础信息（立即加载）  
    orderHistory: null // 订单记录（按需加载）  
  }),  
  actions: {  
    async loadOrders() {  
      this.orderHistory = await fetchOrders();  
    }  
  }  
});  

// 组件中按需调用  
const store = useUserStore();  
onMounted(() => store.loadOrders());

2. 批量更新防抖处理

// 使用pinia-plugin-persistedstate + lodash防抖  
import { debounce } from 'lodash-es';  

export const useFormStore = defineStore('form', {  
  state: () => ({ fields: {} }),  
  actions: {  
    updateField: debounce(function (key, value) {  
      this.fields[key] = value;  
    }, 300)  
  },  
  persist: true  
});

bing