如何优化 Vue 项目的首屏加载速度？（如路由懒加载/CDN/按需引入）

优化 Vue 项目首屏加载速度是前端性能优化的核心场景之一，我会从你提到的路由懒加载、CDN 引入、按需引入三个核心方向展开，同时补充其他关键优化手段，所有方案都附带可落地的代码示例和配置说明。

一、核心优化方案（附实操代码）

1. 路由懒加载（最基础且收益最高）

原理：默认情况下，Vue 会把所有路由对应的组件打包到一个 JS 文件中，首屏加载时需要加载全部代码；路由懒加载会将不同路由对应的组件分割成不同的代码块，只有访问该路由时才加载对应的代码块，大幅减小首屏打包体积。

实现方式：

javascript

运行

// router/index.js (Vue2/Vue3 通用写法)
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

// 原始写法（未懒加载）：import Home from '@/views/Home'
// 懒加载写法（推荐）：
const Home = () => import(/* webpackChunkName: "home" */ '@/views/Home')
const About = () => import(/* webpackChunkName: "about" */ '@/views/About')
// 注：/* webpackChunkName: "home" */ 是魔法注释，用于给分割后的代码块命名，方便打包后排查

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

// Vue3 + Vite 写法（更简洁）
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      // Vite 内置支持懒加载，无需额外配置
      component: () => import('../views/HomeView.vue')
    }
  ]
})

2. CDN 引入第三方依赖（减小打包体积）

原理：将 Vue、VueRouter、ElementUI 等体积较大的第三方库，从项目打包文件中剥离，通过 CDN 链接在 index.html 中引入，利用 CDN 的缓存和就近访问特性提升加载速度。

实现步骤：

步骤 1：修改 index.html，引入 CDN 链接

html

预览

<!-- public/index.html (Vue2) 或 index.html (Vue3 + Vite) -->
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Vue 项目</title>
    <!-- 引入 Vue CDN（Vue2 示例） -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.runtime.min.js"></script>
    <!-- 引入 VueRouter CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.6.5/dist/vue-router.min.js"></script>
    <!-- 引入 ElementUI CDN -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.css" rel="external nofollow" >
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

步骤 2：配置打包忽略 CDN 依赖（避免重复打包）

Vue2 + Webpack 配置（vue.config.js）：

javascript

运行

module.exports = {
  configureWebpack: {
    externals: {
      // 键：项目中 import 的名称；值：CDN 暴露的全局变量名
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'element-ui': 'ELEMENT'
    }
  }
}

Vue3 + Vite 配置（vite.config.js）：

javascript

运行

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      external: ['vue', 'vue-router'], // 忽略打包的依赖
      output: {
        // 配置全局变量映射
        globals: {
          vue: 'Vue',
          'vue-router': 'VueRouter'
        }
      }
    }
  }
})

3. 按需引入 UI 组件库（替代全量引入）

如果不想用 CDN，可通过按需引入减小 UI 库体积（以 ElementUI 为例）：

步骤 1：安装依赖

bash

运行

# Vue2 + ElementUI
npm install babel-plugin-component -D

步骤 2：配置 babel（.babelrc 或 babel.config.js）

json

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

步骤 3：按需引入组件（main.js）

javascript

运行

// 不再全量引入：import ElementUI from 'element-ui'; Vue.use(ElementUI)
import Vue from 'vue'
import { Button, Input, Table } from 'element-ui' // 只引入需要的组件

// 注册组件
Vue.component(Button.name, Button)
Vue.component(Input.name, Input)
Vue.component(Table.name, Table)

4. 其他关键优化手段

（1）压缩静态资源（Webpack/Vite 内置支持）

Vue2（vue.config.js）：

javascript

运行

module.exports = {
  productionSourceMap: false, // 关闭 sourceMap（减小打包体积，提升加载速度）
  configureWebpack: {
    optimization: {
      minimizer: [
        // 压缩 JS/CSS（默认已开启，可自定义配置）
      ]
    }
  }
}

Vue3（vite.config.js）：

javascript

运行

export default defineConfig({
  build: {
    minify: 'terser', // 开启压缩（默认 esbuild，terser 压缩率更高）
    sourcemap: false, // 关闭 sourceMap
    chunkSizeWarningLimit: 500 // 调整 chunk 体积警告阈值
  }
})

（2）图片优化

小图片转 Base64（减少 HTTP 请求）：

javascript

运行

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        options.limit = 4096 // 小于 4kb 的图片转 Base64
        return options
      })
  }
}

使用 WebP/AVIF 格式图片，或通过 CDN 做图片懒加载。

（3）开启 Gzip 压缩（服务端 + 前端）

前端配置（vue.config.js）：

javascript

运行

const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        test: /\.(js|css|html)$/, // 压缩文件类型
        threshold: 10240, // 大于 10kb 的文件才压缩
        deleteOriginalAssets: false // 不删除原文件
      })
    ]
  }
}

服务端配置（Nginx 示例）：

nginx

# 开启 Gzip
gzip on;
gzip_types text/plain text/css application/javascript application/json;
gzip_static on; # 优先使用前端打包的 .gz 文件

二、优化效果验证

打包后查看 dist 目录下的文件体积（重点看 app.xxx.js 等首屏加载的文件）；
使用 Chrome DevTools 的 Network 面板，查看首屏加载的资源大小和耗时；

使用 webpack-bundle-analyzer 分析打包体积：

javascript

运行

// vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
  configureWebpack: {
    plugins: [new BundleAnalyzerPlugin()]
  }
}

总结

路由懒加载是基础优化，通过分割代码块减小首屏加载体积，所有 Vue 项目都应优先配置；
CDN 引入第三方依赖和按需引入 UI 库二选一，核心是剥离大体积第三方代码，避免打包到主文件；
辅助优化（压缩静态资源、Gzip、图片优化）可进一步降低资源体积和加载耗时，建议结合服务端配置（如 Nginx）落地。

这些方案组合使用，通常能将 Vue 项目首屏加载时间降低 50% 以上，具体效果取决于项目原始体积和优化力度。

一、核心优化方案（附实操代码）

1. 路由懒加载（最基础且收益最高）

2. CDN 引入第三方依赖（减小打包体积）

步骤 1：修改 index.html，引入 CDN 链接

步骤 2：配置打包忽略 CDN 依赖（避免重复打包）

3. 按需引入 UI 组件库（替代全量引入）

4. 其他关键优化手段

（1）压缩静态资源（Webpack/Vite 内置支持）

（2）图片优化

（3）开启 Gzip 压缩（服务端 + 前端）

二、优化效果验证

总结

相关文章