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();
});
相关推荐
tianchang3 分钟前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范
best6665 分钟前
JavaScript的Math内置对象,到底是何方神圣?
javascript
掘金安东尼11 分钟前
技术解析:高级 Excel 财务报表解析器的架构与实现
前端·javascript·面试
Hilaku12 分钟前
深入CSS层叠的本质:@layer如何优雅地解决样式覆盖与!important滥用问题
前端·css·html
天天扭码16 分钟前
AI时代,前端如何处理大模型返回的多模态数据?
前端·人工智能·面试
每天开心18 分钟前
一文教你掌握事件机制
前端·javascript·ai编程
LeeAt25 分钟前
真的!真的就一句话就能明白this指向问题
前端·javascript
阳火锅26 分钟前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
hahala233343 分钟前
ESLint 提交前校验技术方案
前端
夕水1 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js