当前位置：首页 > news >正文

19、Vue项⽬常⻅优化点

news 来源：原创 2025/5/23 3:52:37

在 Vue 项目中，有许多方面可以进行优化，以提升项目的性能、可维护性和用户体验。以下是一些常见的优化点：

代码层面优化

1. 组件懒加载

在大型 Vue 项目中，使用组件懒加载可以将应用分割成多个小的代码块，只有在需要时才加载这些代码块，从而减少初始加载时间。

// 普通导入
// import MyComponent from './MyComponent.vue'

// 懒加载
const MyComponent = () => import('./MyComponent.vue')

export default {
  components: {
    MyComponent
  }
}

2. 计算属性缓存

计算属性会根据其依赖自动缓存结果，只有当依赖发生变化时才会重新计算。避免在模板中使用复杂的表达式，而是使用计算属性来提高性能。

vue

<template>
  <div>{{ fullName }}</div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  }
}
</script>

3. 事件监听器销毁

在组件销毁时，确保手动移除自定义事件监听器，避免内存泄漏。

vue

<script>
export default {
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      // 处理窗口大小变化
    }
  }
}
</script>

4. 避免内联事件处理函数

内联事件处理函数会在每次渲染时创建新的函数实例，增加内存开销。建议使用方法绑定。

vue

<!-- 不推荐 -->
<!-- <button @click="() => console.log('Clicked')">Click me</button> -->

<!-- 推荐 -->
<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Clicked')
    }
  }
}
</script>

构建层面优化

1. 压缩代码

使用工具（如 UglifyJS、Terser）对代码进行压缩，去除多余的空格、注释和换行符，减小文件体积。
在 Vue CLI 项目中，可以通过配置vue.config.js来启用代码压缩：

javascript

module.exports = {
  productionSourceMap: false, // 不生成source map
  configureWebpack: {
    optimization: {
      minimize: true
    }
  }
}

2. 分割代码

使用webpack的代码分割功能，将公共代码提取到单独的文件中，避免重复加载。

javascript

// vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    }
  }
}

3. 图片优化

压缩图片：使用图片压缩工具（如 TinyPNG）对图片进行压缩，减小图片文件大小。
使用合适的图片格式：根据图片类型选择合适的格式，如 JPEG 适用于照片，PNG 适用于图标和透明背景图片，WebP 格式具有更好的压缩比。

性能层面优化

1. `v-if` 和 `v-show` 合理使用

v-if 是真正的条件渲染，当条件为假时，元素会被完全移除，条件为真时才会重新渲染。适用于不经常切换的场景。
v-show 只是通过 CSS 的display属性来控制元素的显示和隐藏，元素始终会被渲染。适用于频繁切换的场景。

vue

<!-- 不经常切换 -->
<div v-if="isShow">Content</div>

<!-- 频繁切换 -->
<div v-show="isShow">Content</div>

2. 虚拟列表

当需要渲染大量数据时，使用虚拟列表可以只渲染当前可见区域的数据，减少 DOM 节点数量，提高性能。可以使用第三方库（如vue-virtual-scroller）来实现。

3. 优化响应式数据

避免在响应式对象中添加过多不必要的属性，因为 Vue 会对响应式对象的所有属性进行劫持。可以使用Object.freeze()来冻结不需要响应式的对象。

javascript

const nonReactiveData = Object.freeze({
  // 不需要响应式的数据
  someValue: 'value'
})

export default {
  data() {
    return {
      reactiveData: {
        // 需要响应式的数据
        name: 'John'
      },
      nonReactiveData
    }
  }
}