Nuxt.js 项目性能优化

前言

随着现代Web应用的复杂度不断提升，前端性能优化已成为提升用户体验和SEO效果的关键因素。Nuxt.js作为Vue.js的全栈框架，虽然在SSR、SEO等方面具有天然优势，但在实际项目开发中，不合理的架构设计和代码组织往往会导致性能问题。

笔者在对公司一个大型 Nuxt.js 项目进行性能优化时，发现该项目存在多个性能瓶颈，首屏加载时间长、资源体积臃肿、组件加载策略不当等问题。通过系统性的优化策略，最终实现了显著的性能提升。本文将结合实际优化经验，分享一套完整的Nuxt.js性能优化方法论。

合理拆分项目

我在优化公司的项目时发现将官网和管理端代码全部放在同一个仓库中，造成了严重的性能问题。当用户访问官网时，首屏会加载大量管理端相关的代码，导致下面的问题：

首屏渲染时间过长（超过5秒）
用户体验极差
SEO效果受到严重影响
资源利用率低下

经过技术调研和竞品分析，我决定将项目拆分为两个独立项目，分别是xxx-site 和xxx-admin项目

xxx-site 是官网项目，追求极致的加载性能、优秀的SEO表现、卓越的用户体验和高效的静态资源管理

xxx-admin 是管理端项目，追求高稳定性保障、强安全性控制、完善的权限管理和丰富的功能模块等

这两个项目分别使用不同的代码仓库管理，最后部署到不同的域名里，从官网跳转到管理端，直接使用外链地址跳转

这样做的好处就是构建产物体积减少60%以上，打包的bundle.js相比之前肯定大大减少(毕竟访问官网时不用加载管理端的代码)。首屏渲染时间从5秒降至1.5秒，页面加载速度提升3倍。

所以遇到性能优化的需求，首先试一试拆分项目这个思路

路由懒加载

路由懒加载是指当用户访问特定页面路由时，才动态加载对应页面组件的代码，而非在首屏一次性加载所有页面资源。这种策略能够显著减少初始包体积，提升首屏性能。

大白话就是每个页面的js代码单独拆成一个脚本，加载某个页面的同时加载对应的 js 脚本，所以提升了用户体验

Nuxt.js框架天然支持路由懒加载，开箱即用，无需额外配置。框架会根据pages目录结构自动生成路由表，并为每个页面组件实现懒加载。

使用动态路由的代码如下所示：

javascript 复制代码

{
  path: '/about',
  component: () => import('../pages/about.vue'), // 动态import实现懒加载
}

路由懒加载带来的性能提升包括：

减少初始包体积：首屏只加载当前页面必需的代码
提升加载速度：减少网络传输时间和浏览器解析时间
优化内存使用：按需加载避免不必要的内存占用
改善用户体验：更快的页面响应时间

路由懒加载使用非常简单，笔者就不多说了

组件懒加载

上面说到页面组件懒加载，其实单个组件也可以实现懒加载。在Vue3中的组件懒加载主要通过动态 import和defineAsyncComponent一起实现，允许组件在需要时才被加载和渲染

基本实现方式如下

javascript 复制代码

import { defineAsyncComponent } from 'vue'

// 定义懒加载组件
const MyComponent = defineAsyncComponent(() => import('./MyComponent.vue'))

// 带加载状态的懒加载组件
const AsyncComponent = defineAsyncComponent({
  loader: () => import('./HeavyComponent.vue'),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 200, // 延迟显示loading的时间
  timeout: 3000 // 超时时间
})

export default {
  components: { 
    MyComponent,
    AsyncComponent 
  }
}

以下类型的组件特别适合实现懒加载：

大型编辑器组件：如代码编辑器、富文本编辑器
图表组件：ECharts、D3.js等可视化组件
地图组件：Google Maps、百度地图等
媒体组件：视频播放器、音频播放器
第三方插件：社交分享、评论系统等

组件懒加载是非常有必要的，哪些组价适合使用懒加载需要结合业务仔细分析

静态资源瘦身

我在优化项目中过程中，发现项目中存在大量 PNG 格式的图片，这些图片用于展示产品功能，但是这些图片普遍体积较大，严重影响加载性能。

WebP作为新一代图片格式，具有以下优势：

压缩率高：相比PNG格式体积减少40-70%
质量保持：在相同视觉质量下体积更小
广泛支持：现代浏览器支持度良好
多样性：支持有损和无损压缩

我是通过在线转换工具把 png 图片转换为 webp 图片。使用的工具如下

cloudconvert.com/png-to-webp (每天有免费额度)

一张258kb大小的图片转换为webp格式的图片大小仅有137kb。画质损失很小。整个项目中所有的图片转为webp后，对性能的提升非常显著

使用@nuxt/image优化图片加载

上面说到手动把图片转换为webp格式，下面说一下Nuxt.js官方提供的智能图片优化模块@nuxt/image，它能够自动处理和优化图片的加载与显示

@nuxt/image的核心功能特性：

自动优化：服务端或构建时自动压缩、裁剪、生成多尺寸
格式转换：智能选择最优图片格式
多源支持：兼容本地图片、远程图片、CDN服务
懒加载：内置图片懒加载功能
预加载：支持关键图片预加载

基本配置示例如下

javascript 复制代码

// nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    // 图片优化配置
    quality: 80,
    format: ['webp', 'jpg'],
    
    // CDN配置
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/your-cloud/image/upload/'
    },
    
    // 预设尺寸
    screens: {
      xs: 320,
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280,
    }
  }
})

在组件中的使用方式

vue 复制代码

<template>
  <!-- 基础用法 -->
  <NuxtImg src="/hero.jpg" alt="Hero Image" />
  
  <!-- 响应式图片 -->
  <NuxtImg 
    src="/hero.jpg" 
    sizes="sm:100vw md:50vw lg:400px"
    alt="Responsive Image" 
  />
  
  <!-- 懒加载图片 -->
  <NuxtImg 
    src="/hero.jpg" 
    loading="lazy"
    placeholder="blur"
    alt="Lazy Image" 
  />
</template>

@nuxt/image能自动选择最优格式，支持响应式布局，支持懒加载，对提升首屏性能非常显著

使用TailwindCSS

TailwindCSS是前端领域非常火的CSS 解决方案。TailwindCSS 是原子化CSS框架，通过预设的类名组合实现样式，开发人员不用在管理css文件

配置和使用如下

javascript 复制代码

// nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  tailwindcss: {
    configPath: 'tailwind.config.js',
    cssPath: '~/assets/css/tailwind.css',
  }
})

vue 复制代码

<template>
  <!-- 原子化样式组合 -->
  <div class="flex items-center justify-between p-4 bg-white shadow-lg rounded-lg">
    <h1 class="text-2xl font-bold text-gray-800">Title</h1>
    <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
      Action
    </button>
  </div>
</template>

TailwindCSS 主要优势在于在打包时自动移除使用的样式，按需打包项目中用到的样式，产生的css文件非常非常小

某些页面使用SSG渲染

静态站点生成(SSG)是指在构建阶段预先生成静态HTML文件，用户访问时直接返回已生成的HTML，无需服务端实时渲染。

配置如下所示

javascript 复制代码

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/about', '/privacy', '/terms']
    }
  },
  
  // 或者在页面中配置
  // pages/about.vue
  definePageMeta({
    prerender: true
  })
})

以下页面类型适合使用SSG渲染：

静态内容页面：关于我们、隐私条款、服务条款
产品展示页面：产品介绍、功能说明
博客文章：技术文档、新闻资讯
Landing页面：营销活动页面

局部UI组件优化

在项目开发过程中，某些组件的代码质量不高，导致组件难以优化。这在项目中一定存在，如果老板给的时间比较多，那么就要考虑把这些组件重构。

如何重构这又是一个大话题，笔者以后会讲

总结

性能优化是一个持续的过程，需要在项目开发的各个阶段都保持关注。在确定的架构设计和固定的技术选型下，使用笔者提供的八种优化技巧，为用户提供优秀的Web应用体验，同时也为业务发展奠定坚实的技术基础。