vue3 + vite 性能优化，详细代码说明

一花一world

已于 2023-06-24 15:39:40 修改

阅读量2.8k

点赞数 5

CC 4.0 BY-SA版权

文章标签：性能优化 javascript 前端

于 2023-06-24 15:32:55 首次发布

本文链接：https://blog.youkuaiyun.com/ACCPluzhiqi/article/details/131362355

本文介绍了Vue3和Vite应用的性能优化方法，包括使用Tree-shaking减少打包体积，动态导入实现路由和组件的懒加载，缓存组件以减少初始化，优化图片加载，利用CDN加速，减少重绘和重排，使用生产模式，以及善用缓存策略如ServiceWorker和localStorage等。此外，还提到了避免不必要的全局组件以提高性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于Vue 3和Vite应用的性能优化，以下是一些常见的技巧和建议：

使用Tree-shaking：Vue 3和Vite支持ES模块的静态分析，因此可以利用Tree-shaking特性，只引入项目中实际使用的模块，减少打包体积。
懒加载路由：使用Vue Router的动态导入功能，将路由按需加载，可以减少初始加载的资源量，提高应用的性能。
异步组件：将组件按需加载，可以减少初始加载时的组件数量，提高应用的启动速度。
缓存组件：在使用频率高、不经常变动的组件上设置keep-alive，通过缓存组件实例，减少组件的初始化和销毁次数。
优化图片加载：使用合适的图片格式，如WebP格式可以提供更好的图像压缩效果。另外，可以使用懒加载或者按需加载的方式来加载图片，减少初始加载时的资源请求。
CDN加速：将静态资源如CSS、JavaScript文件等托管到CDN上，可以加速资源的加载速度。
减少重绘和重排：避免频繁修改DOM样式，优化JavaScript代码，减少强制同步布局计算。
使用生产模式：在构建发布版本时，确保使用Vue和Vite的生产模式，这会应用一些优化措施如代码压缩、文件合并等，提高应用的性能和加载速度。
路由懒加载：使用Vue Router的异步组件加载功能，将路由模块按需加载，减少初始加载时的资源请求。
使用vue-lazyload插件：对于需要延迟加载的图片，可以使用vue-lazyload插件，实现图片懒加载，提高页面加载速度。
代码拆分：使用动态导入（Dynamic Import）功能分割代码，根据路由或用户操作情况按需加载代码块，减少初始加载的 JS 文件大小。
使用缓存：合理使用缓存策略和技术，如Service Worker和localStorage等，提高应用的响应速度。
避免不必要的全局组件：全局组件会增加初始化和渲染的负担，仅在必要的情况下使用全局组件，否则使用局部组件来减少性能开销。

下面是详细代码说明：

以下是一些Vue 3和Vite应用性能优化的代码示例：

1. 使用Tree-shaking：

在Vite项目中，Tree-shaking是默认启用的，只需确保在代码中只引入实际使用的模块即可。

2. 懒加载路由：

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('./views/Home.vue'), // 按需加载组件
    },
    // 其他路由配置
  ],
});

export default router;

3. 异步组件：

import { defineAsyncComponent } from 'vue';

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

4. 缓存组件：

<template>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</template>

5. 优化图片加载：

<template>
  <img src="image.jpg" loading="lazy" alt="Image" />
</template>

6. CDN加速：

在Vite的index.html文件中，将静态资源的URL替换为CDN的URL：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.example.com/style.css">
  </head>
  <body>
    <script src="https://cdn.example.com/script.js"></script>
  </body>
</html>

7. 减少重绘和重排：

在修改DOM样式时，使用requestAnimationFrame来优化重绘和重排：

function updateElementStyle() {
  requestAnimationFrame(() => {
    // 修改DOM样式
  });
}

8. 使用生产模式：

在构建Vite项目时，使用--mode production参数来启用生产模式：

vite build --mode production

9. 路由懒加载：

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('./views/Home.vue'), // 按需加载组件
    },
    // 其他路由配置
  ],
});

export default router;

10. 使用vue-lazyload插件：

首先安装vue-lazyload插件：

npm install vue-lazyload

然后在Vue应用的入口文件中，注册vue-lazyload插件：

import { createApp } from 'vue';
import App from './App.vue';
import VueLazyload from 'vue-lazyload';

const app = createApp(App);
app.use(VueLazyload);

app.mount('#app');

在需要延迟加载的图片上使用v-lazy指令：

<template>
  <img v-lazy="imageSrc" alt="Image" />
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'image.jpg',
    };
  },
};
</script>

11. 使用Web Worker：

Web Worker是浏览器提供的运行在后台线程的JavaScript API，可以将一些耗时的计算或操作放在Web Worker中执行，以避免阻塞主线程。在Vue应用中，可以使用Web Worker来处理复杂的计算或数据处理任务，提高应用的响应速度。

首先，创建一个Worker文件，比如worker.js：

// worker.js
self.onmessage = function(event) {
  // 处理任务并发送结果给主线程
  const result = doHeavyCalculation(event.data);
  self.postMessage(result);
};

function doHeavyCalculation(data) {
  // 执行耗时的计算或操作
  // ...
  return result;
}

然后，在Vue组件中使用Web Worker：

// MyComponent.vue
export default {
  mounted() {
    const worker = new Worker('worker.js');
    worker.onmessage = function(event) {
      // 处理来自Web Worker的消息
      const result = event.data;
      // 更新组件或执行其他操作
    };
    worker.postMessage(data);
  },
};

12. 使用缓存策略：

合理使用缓存策略可以减少对服务器的请求，提高应用的加载速度和性能。在Vue应用中，可以使用浏览器提供的缓存策略和技术，如Service Worker和localStorage等。

使用Service Worker来缓存应用的静态资源，使得应用在离线状态下也能够加载，提高用户体验。

// 注册Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js') 
    .then((registration) => {
      console.log('Service Worker 注册成功！');
    })
    .catch((error) => {
      console.log('Service Worker 注册失败：', error);
    });
}

使用localStorage来缓存应用的数据，例如用户的配置信息、上次访问的数据等。

// 保存数据到localStorage
localStorage.setItem('key', 'value');

// 从localStorage读取数据
const value = localStorage.getItem('key');

// 清除localStorage中的数据
localStorage.removeItem('key');

13. 避免不必要的全局组件：

全局组件会增加初始化和渲染的负担，应该仅在必要的情况下使用全局组件。在Vue 3中，可以使用app.component方法来注册局部组件，以减少性能开销。

// MyComponent.vue
// 在组件内部注册局部组件
import AnotherComponent from './AnotherComponent.vue';

export default {
  components: {
    AnotherComponent,
  },
};