Vue 性能优化：从渲染优化到代码分割的全面指南

Vue 极速入门 第 12 节：Vue 性能优化：从渲染优化到代码分割的全面指南

引言

Vue.js 是一款高效的前端框架，但随着应用规模的增长，性能问题可能逐渐显现。本文将带你深入探索 Vue 性能优化的核心技巧，从减少不必要的渲染到懒加载与代码分割，助你打造高性能的 Vue 应用。

1. 减少不必要的渲染：v-once 与 v-memo 的使用

1.1 什么是渲染优化？

渲染优化是指通过减少不必要的 DOM 操作和组件更新，提升应用的性能。Vue 提供了多种工具和指令来帮助开发者实现这一目标。

1.2 使用 v-once 指令

v-once 指令用于标记元素或组件只渲染一次，之后的更新将被忽略。这对于静态内容的优化非常有用。

<template>
  <div id="app">
    <p v-once>{
  { staticMessage }}</p>
    <p>{
  { dynamicMessage }}</p>
    <button @click="changeInnerHtml">点我改变内容</button>
  </div>
</template>

<script>
export default {
     
  data() {
     
    return {
     
      staticMessage: '这是一条静态消息',
      dynamicMessage: '这是一条动态消息'
    };
  },
  methods: {
     
    changeInnerHtml() {
     
      this.staticMessage = '这是 1 条静态消息';
      this.dynamicMessage = '这是 1 条动态消息';
    }
  }
};
</script>

目录结构：

project/
├── src/
│   ├── main.js
│   └── App.vue
├── index.html
└── package.json

文件解释：

• App.vue：Vue 组件，使用 v-once 指令优化静态内容渲染。

运行结果：

点击按钮之后，发现 被v-once 指令标记元素或组件只渲染一次，更新被忽略了。对于静态内容的优化非常有用。

1.3 使用 v-memo 指令

v-memo 是 Vue 3.2 引入的新指令，用于优化复杂组件的渲染。它通过缓存渲染结果，避免不必要的重新渲染。

<template>
  <div v-memo="[item.id]">
    <p>{
  { item.name }}</p>
    <p>{
  { item.description }}</p>
  </div>
</template>

<script>
export