继公司同事抛出的vue项目首屏加载慢给他提供的解决思路步骤分享出来

人称小鱿鱼溪

已于 2025-02-24 11:17:17 修改

阅读量1k

点赞数 11

文章标签： vue.js 前端 javascript

于 2025-02-24 10:24:53 首次发布

本文链接：https://blog.youkuaiyun.com/Evi7seve/article/details/145820622

版权

在 Vue.js 项目中，首屏渲染慢的问题通常是由于以下几个原因导致的：

资源加载过多：首屏需要加载的资源较大，如 JS、CSS 文件、图片等，造成加载时间过长。
过多的组件渲染：首屏渲染时，可能一次性加载了很多组件，尤其是使用了大量复杂的组件。
JavaScript 执行阻塞：大量的 JavaScript 代码执行，导致浏览器渲染过程被阻塞。
服务器响应延迟：从服务器获取的数据比较大或者响应时间较长，导致渲染等待时间较长。

解决这些问题的方法可以从以下几个方面入手：

1. 代码拆分与懒加载

通过 代码分割 和 懒加载，避免一次性加载所有的 JS 文件。Vue 支持通过路由懒加载和组件懒加载来实现代码拆分。

示例：路由懒加载

const routes = [
  {
    path: '/home',
    component: () => import('./components/Home.vue') // 仅在访问时加载
  }
]

<template>
  <div>
    <Suspense>
      <template #default>
        <LazyComponent />
      </template>
      <template #fallback>
        <div>Loading...</div>
      </template>
    </Suspense>
  </div>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

const LazyComponent = defineAsyncComponent(() => import('./components/LazyComponent.vue'))
</script>

这样可以让用户在访问页面时，仅加载当前需要的资源，而不是加载整个应用。

2. 使用 `vue-server-renderer` 进行服务器端渲染 (SSR)

服务器端渲染（SSR）可以在服务器端预先渲染页面内容，减少客户端的渲染负担，从而加速首屏渲染。Vue 提供了 vue-server-renderer 用于 SSR。

使用 SSR 后，浏览器加载页面时，HTML 内容已经渲染好，首屏加载时直接展示页面，避免了浏览器进行大量的 JavaScript 渲染。

示例：Vue SSR 配置

你可以使用 Nuxt.js，它是一个基于 Vue 的框架，内置了服务器端渲染和静态页面生成等功能，帮助你快速实现 SSR：

# 安装 Nuxt.js
npx create-nuxt-app my-app

然后，你可以在 Nuxt 中编写页面，系统会自动处理服务器端渲染的相关配置。

3. 使用 `v-show` 替代 `v-if`

在 Vue 中，v-if 是 条件渲染，当条件为 false 时，Vue 会从 DOM 中删除元素。当条件变为 true 时，Vue 会重新插入该元素并重新渲染。如果这个元素涉及到复杂的计算或数据请求，可能会造成性能问题。

而 v-show 是 简单的显示/隐藏，它只是通过 display 样式来控制元素的显隐，不会触发重新渲染。因此，当你只需要切换显示与隐藏时，v-show 更加高效。

4. 减少 JavaScript 执行时间

减少 JavaScript 体积：优化 JavaScript 代码，移除不必要的依赖，使用 Tree Shaking 来去除未使用的代码。

如果使用的是 Webpack，可以通过配置 TerserPlugin 来压缩 JavaScript：

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

Web Workers：对于一些计算量大的任务，考虑使用 Web Workers 将其放到后台线程，避免阻塞主线程，从而保证渲染流畅。

5. 优化首屏请求

图片懒加载：延迟加载首屏外的图片，使用 IntersectionObserver 实现图片懒加载，避免加载不必要的图片资源。
```
<img v-lazy="imageUrl" alt="example" />
```
使用 v-lazy 或类似库（如 vue-lazyload）来实现图片懒加载。
静态资源压缩：压缩 JS、CSS 和图片等资源，减少首屏资源大小。你可以使用 Webpack 或 Vite 来实现资源的压缩和优化。

# 使用 Vite 进行构建时，启用压缩功能
npm run build -- --mode production

6. 开启浏览器缓存

通过合理的缓存策略，避免重复加载相同的资源，尤其是静态资源。你可以通过 Cache-Control 或 ETag 等 HTTP 头来控制资源的缓存策略。

7. 预加载关键资源

使用 <link rel="preload"> 或 <link rel="prefetch"> 来预加载关键资源，如字体、脚本和样式，确保在渲染页面时能够快速加载这些资源。

<link rel="preload" href="main.css" as="style">
<link rel="preload" href="main.js" as="script">

8. 减少 CSS 和 JavaScript 体积

CSS 按需加载：使用如 PostCSS 或 PurgeCSS 等工具来清理未使用的 CSS 代码。
使用 Scoped CSS：如果 CSS 只作用于某个组件，使用 scoped 来限制 CSS 的作用范围，从而减小 CSS 的体积。

9. 启用浏览器的渲染优化

CSS 动画优化：对于动画，尽量使用 transform 和 opacity，避免使用 top、left 这样的布局属性，因为它们会引发回流和重绘，影响性能。

10. 使用 PWA（渐进式 Web 应用）

通过使用 PWA 特性，您可以将应用缓存到浏览器本地，这样可以减少每次请求的延迟，提升用户的加载体验。

总结

要解决 Vue 首屏渲染慢的问题，通常可以从以下几个方面着手：

代码拆分与懒加载，避免一次性加载所有资源。
使用 SSR（服务器端渲染） 来提前渲染内容。
使用 v-show 替代 v-if 来减少不必要的渲染。
优化首屏请求，包括图片懒加载和资源压缩。
减少 JavaScript 执行时间，使用 Web Workers。
启用浏览器缓存和预加载关键资源。

通过这些优化，可以有效提升 Vue 应用的首屏渲染速度，改善用户体验。