Vue2 项目页面加载慢、卡顿，如何优化

原创于 2025-08-20 10:41:39 发布 · 501 阅读

6 ·

CC 4.0 BY-SA版权

未经csdn博主（前端-尔嵘）允许不得转载，转载请注明转载路径及说明！

文章标签：

#vue.js #前端

Vue2 专栏收录该内容

87 篇文章

订阅专栏

针对 Vue2 项目页面加载慢、卡顿的问题，结合 “逻辑集中在 mounted、页面不缓存” 的反馈，我们可以分阶段优化，尽量减少代码改动量，同时提升性能。以下是具体优化方案：

一、核心问题分析

mounted 逻辑过重：若 mounted 中包含大量同步操作（如数据处理、DOM 操作、接口请求），会阻塞页面初始化渲染，导致加载卡顿。
页面无缓存：每次进入页面都重新创建组件、请求数据、执行初始化逻辑，重复消耗资源。
可能的衍生问题：未优化的 DOM 渲染（如大量 v-for 无 key、频繁重绘）、接口请求未缓存、资源加载未优化等。

二、分阶段优化方案（尽量减少代码改动）

阶段 1：轻量优化 mounted 逻辑（改动最小，立竿见影）

目标：将 mounted 中的阻塞逻辑拆分，避免同步执行大量操作。

拆分同步逻辑为异步执行
将 mounted 中非立即必要的逻辑（如数据格式化、非关键 DOM 操作）用setTimeout或Promise异步执行，避免阻塞初始化。

// 优化前：mounted中同步执行所有逻辑
mounted() {
  this.fetchData(); // 接口请求
  this.formatBigData(); // 大量数据处理
  this.initDomEvent(); // DOM事件绑定
}

// 优化后：拆分异步执行
mounted() {
  // 1. 优先执行关键逻辑（接口请求、必要初始化）
  this.fetchData().then(() => {
    // 2. 数据返回后，异步处理非关键逻辑
    setTimeout(() => {
      this.formatBigData(); // 不阻塞UI
    }, 0);
  });
  // 3. 非关键事件绑定异步执行
  setTimeout(() => {
    this.initDomEvent();
  }, 0);
}

接口请求提前 / 并行处理
若多个接口无依赖，用Promise.all并行请求，减少总耗时；若部分数据可预加载，在路由守卫（如beforeEnter）中提前请求。

// 路由配置中提前请求公共数据
const router = new VueRouter({
  routes: [
    {
      path: '/xxx',
      component: Xxx,
      beforeEnter: (to, from, next) => {
        // 预加载公共数据（如字典、配置），缓存到vuex
        store.dispatch('fetchCommonData').finally(next);
      }
    }
  ]
});

避免在 mounted 中直接操作 DOM
若有 DOM 操作（如计算高度、初始化第三方插件），用this.$nextTick确保 DOM 渲染完成后执行，避免重复操作。
```
mounted() {
  this.$nextTick(() => {
    // 确保DOM渲染后执行
    this.initScrollPlugin(); 
  });
}
```

阶段 2：局部使用 keep-alive（无需大改，针对性缓存）

目标：对高频访问、初始化成本高的页面（如列表页、详情页）启用缓存，减少重复创建 / 销毁。

路由级别局部缓存
无需全局启用 keep-alive，仅在路由配置中标记需要缓存的页面，配合<keep-alive>的include属性针对性缓存。

<!-- App.vue 中修改路由出口 -->
<template>
  <div id="app">
    <!-- 只缓存name为PageA、PageB的组件 -->
    <keep-alive include="PageA,PageB">
      <router-view />
    </keep-alive>
  </div>
</template>

<!-- 对应页面组件（如PageA.vue）需指定name -->
<script>
export default {
  name: 'PageA', // 必须与include中的名称一致
  // ...
}
</script>

缓存策略：区分 “需要刷新” 和 “保持状态”
缓存后默认不会重新执行 mounted，若部分场景需要刷新（如从详情页返回列表页），可通过路由守卫或组件内钩子控制：

// 组件内使用activated钩子（keep-alive缓存的组件激活时触发）
activated() {
  // 从路由参数判断是否需要刷新数据（如携带refresh=1）
  if (this.$route.query.refresh) {
    this.fetchData(); // 强制刷新
  }
},
// 替代mounted的初始化逻辑（缓存时不会重复执行）
mounted() {
  this.fetchData(); // 首次加载执行
}

阶段 3：数据缓存与渲染优化（减少重复消耗）

接口数据缓存
对不频繁变动的数据（如字典、配置、用户信息），用 vuex 或 localStorage 缓存，避免重复请求。

// vuex模块中封装带缓存的请求
actions: {
  fetchGoodsList({ commit, state }, params) {
    // 若缓存存在且未过期，直接返回
    if (state.goodsCache[params.id] && Date.now() - state.goodsCache[params.id].time < 300000) {
      return Promise.resolve(state.goodsCache[params.id].data);
    }
    // 否则请求接口并缓存
    return api.getGoods(params).then(res => {
      commit('SET_CACHE', { id: params.id, data: res, time: Date.now() });
      return res;
    });
  }
}

DOM 渲染优化
- 列表渲染加key（避免复用错误）：v-for="item in list" :key="item.id"
- 用v-show替代频繁切换的v-if（减少 DOM 销毁 / 创建）
- 复杂列表用 “虚拟滚动”（如vue-virtual-scroller），只渲染可视区域 DOM

阶段 4：资源与打包优化（针对内网环境）

路由懒加载
确保路由组件用懒加载拆分代码包，减少首屏加载资源体积：

// 路由配置
const routes = [
  {
    path: '/home',
    component: () => import('@/views/Home.vue') // 懒加载
  }
];

压缩静态资源
- 图片：压缩后再引用（用 tinypng 等工具），大图片用懒加载（v-lazy）
- CSS/JS：通过 webpack 配置压缩（terser-webpack-plugin、css-minimizer-webpack-plugin）
- 移除未使用的依赖（如npm prune）和代码（借助webpack-bundle-analyzer分析）

三、优化效果验证

性能监测工具：
- 使用 Vue Devtools 的 “Performance” 面板，记录优化前后的组件初始化时间、渲染耗时。
- 浏览器 “开发者工具 - 性能” 标签，录制页面加载过程，分析长任务（Long Task）是否减少。
关键指标对比：
- 页面首次加载时间（从进入到可交互）
- 路由切换时间（从点击到新页面渲染完成）
- 重复进入同一页面的耗时（验证缓存效果）

四、总结

优化优先级：先优化 mounted 逻辑拆分（改动小、见效快）→ 局部启用 keep-alive（针对高频页面）→ 数据与渲染优化 → 资源打包优化。
通过以上步骤，可在不大量重构代码的前提下，显著改善页面加载慢、卡顿问题，同时避免 keep-alive 全局启用带来的兼容风险。