Vue.js 学习总结(10)—— Vue 前端项目性能优化常用技巧

1. 使用路由懒加载

在 Vue.js 应用中,路由懒加载可以延迟加载路由组件直到它们被需要时才加载,从而减少应用的初始加载时间。示例代码

javascript 复制代码
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';

const Home = () => import('../views/Home.vue');
const About = () => import('../views/About.vue');

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

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

export default router;

2. 利用 Vite 或 Webpack 的代码分割

使用构建工具如 Vite 或 Webpack 的代码分割功能,可以将代码拆分成多个块,按需加载。Vite 示例配置

javascript 复制代码
// vite.config.js
export default {
  build: {
    chunkSizeWarningLimit: 500,
    rollupOptions: {
      output: {
        chunkFileNames: 'assets/[name]-[hash].js'
      }
    }
  }
};

3. 使用 v-show 替代 v-if

v-if 会导致元素的创建或销毁,而 v-show 只是切换元素的显示状态。对于频繁切换的情况,v-show 更高效。示例代码

javascript 复制代码
<template>
  <div v-show="isVisible">这是一段文本</div>
</template>

<script setup>
import { ref } from 'vue';

const isVisible = ref(true);
</script>

4. 避免不必要的响应式数据

减少组件的响应式数据,可以减少 Vue 的响应式系统需要追踪的变化,从而提升性能。示例代码

javascript 复制代码
<script setup>
import { ref } from 'vue';

// 只有需要响应的数据才定义为响应式
const necessaryData = ref(0);
</script>

5. 使用计算属性和 watchEffect 代替频繁的手动数据更新

计算属性和 watchEffect 可以自动追踪依赖并缓存结果,避免不必要的计算。示例代码

javascript 复制代码
<template>
  <div>{{ fullName }}</div>
</template>

<script setup>
import { computed } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed(() => `${firstName.value} ${lastName.value}`);
</script>

6. 优化列表渲染

使用 v-memotrack-by 来优化列表渲染,避免不必要的 DOM 更新。示例代码

javascript 复制代码
<template>
  <ul>
    <li v-for="item in list" :key="item.id" v-memo="item">
      {{ item.text }}
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue';

const list = ref([{ id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }]);
</script>

7. 使用生产环境的构建配置

确保在生产环境中使用合适的构建配置,如压缩 JavaScript、CSS 和 HTML。Vite 示例配置

javascript 复制代码
// vite.config.js
export default {
  build: {
    target: 'es2015',
    minify: 'terser',
    cssCodeSplit: true,
    sourcemap: false
  }
};

8. 利用浏览器缓存

合理配置 HTTP 缓存策略,可以减少服务器的负载和用户的等待时间。示例代码

javascript 复制代码
// server/middleware/cache.js
app.use((req, res, next) => {
  res.setHeader('Cache-Control', 'public, max-age=31536000');
  next();
});
相关推荐
gnip9 分钟前
SSE技术介绍
前端·javascript
yinke小琪24 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿28 分钟前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux29 分钟前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵31 分钟前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆33 分钟前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
豆苗学前端36 分钟前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
不见_36 分钟前
不想再写周报了?来看看这个吧!
前端·命令行
yinke小琪38 分钟前
JavaScript 事件冒泡与事件捕获
前端·javascript
pany40 分钟前
写代码的节奏,正在被 AI 改写
前端·人工智能·aigc