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();
});
相关推荐
weixin_4378309419 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮19 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel19 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常20 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip20 小时前
JavaScript事件流
前端·javascript
小菜全20 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C20 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG20 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_4569042720 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路20 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架