Vite+Vue3加載速度優(yōu)化全過(guò)程

更新時(shí)間：2025年12月03日 17:09:13 作者：acheding

文章介紹了優(yōu)化前端項(xiàng)目性能的幾種方法,包括減小打包體積、異步加載、使用CDN、路由懶加載和組件異步加載等,以提升首屏加載速度和用戶體驗(yàn)

靜態(tài)資源拆分打包

在常規(guī)打包方法下，所有的第三方依賴將會(huì)都打包在一個(gè) vendor.js 文件里，首次打開(kāi)頁(yè)面時(shí)，服務(wù)器會(huì)先加載這個(gè)大文件，導(dǎo)致白屏?xí)r間過(guò)長(zhǎng)。

而我們打包時(shí)，事先將依賴拆分成很多小文件各自進(jìn)行打包，便可以實(shí)現(xiàn)異步加載，大大降低加載時(shí)長(zhǎng)，提升加載效率，減少白屏?xí)r間。

具體操作如下：

export default defineConfig({
  plugins: [vue()],
  build: {
    chunkSizeWarningLimit: 1000, // 單個(gè)模塊文件大小限制1000KB
    terserOptions: {
      // 清除代碼中console和debugger
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
      output: {
        manualChunks(id) {
          // 靜態(tài)資源拆分
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        },
      },
    },
  },
});

nginx 開(kāi)啟 gzip 壓縮

gzip 壓縮分兩種，一種是服務(wù)器壓縮后傳輸給瀏覽器，但是這種方案是請(qǐng)求時(shí)服務(wù)器實(shí)時(shí)壓縮，比較消耗服務(wù)器性能；另外一種就是前端在打包的時(shí)候壓縮好，服務(wù)器做一些相應(yīng)配置就可以返回壓縮包給瀏覽器，只是打包出來(lái)的 dist 體積會(huì)偏大，但是不消耗服務(wù)器性能。這兩種綜合起來(lái)使用是比較劃算的。

server {
	listen 80 default_server;
	listen [::]:80 default_server;

	listen 443 ssl default_server;
	listen [::]:443 ssl default_server;

	root /xxxx/xxxxxx/xxxxx/dist;

	index index.html;

	server_name xxxxx.xxxx;

    gzip on; // 開(kāi)啟服務(wù)器實(shí)時(shí)gzip
    gzip_static on; // 開(kāi)啟靜態(tài)gz文件返回，如果存在請(qǐng)求以gz結(jié)尾的靜態(tài)文件，則直接返回該文件
    gzip_min_length 1k; // 啟用gzip壓縮的最小文件，小于設(shè)置值的文件將不會(huì)壓縮
    #gzip_disable "msie6"; // 禁用IE 6 gzip
    gzip_vary on; // 是否在http header中添加Vary: Accept-Encoding，建議開(kāi)啟
    gzip_proxied any; // 對(duì)代理文件進(jìn)行壓縮
    gzip_comp_level 9; // gzip 壓縮級(jí)別，1-9，數(shù)字越大壓縮的越好，也越占用CPU時(shí)間
    gzip_buffers 4 16k; // 設(shè)置壓縮所需要的緩沖區(qū)大小
    gzip_http_version 1.0; // 設(shè)置gzip壓縮針對(duì)的HTTP協(xié)議版本
    // 進(jìn)行壓縮的文件類型
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/jpeg image/gif image/png image/svg+xml;

	location / {
		try_files $uri $uri/ /index.html;
	}
}

部分依賴不打包，引入 cdn

在沒(méi)有使用 cdn 加速之前，例如 element-plus、@element-plus/icons-vue、vue、vux、axios、vue-router、echarts 等依賴都會(huì)打包，導(dǎo)致 vendor.js 體積很大，影響首屏加載速度。

這個(gè)優(yōu)化則是選擇性地將這些第三方依賴不加入打包，部署到線上之后直接引用線上 cdn 地址。

1.首先需要下載一個(gè)插件。

yarn add rollup-plugin-external-globals -D

2.然后在 main.js 文件中使用此插件，進(jìn)行選擇性打包，并在打包時(shí)將本地的引用替換成 cdn。這樣就可以做到在本地仍然使用依賴，部署線上使用 cdn。

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import externalGlobals from "rollup-plugin-external-globals";

export default defineConfig({
  plugins: [vue()],
  build: {
    chunkSizeWarningLimit: 1000,
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
      //以下文件不打包
      external: [
        "vue",
        "element-plus",
        "@element-plus/icons-vue",
        "vuex",
        "axios",
        "vue-router",
        "echarts",
      ],
      plugins: [
        // 打包時(shí)自動(dòng)將代碼中的引入替換成cdn引入
        externalGlobals({
          vue: "Vue",
          "element-plus": "ElementPlus",
          "@element-plus/icons-vue": "ElementPlusIconsVue",
          vuex: "Vuex",
          axios: "axios",
          "vue-router": "VueRouter",
          echarts: "echarts",
        }),
      ],
      output: {
        manualChunks(id) {
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        },
      },
    },
  },
});

3.在 index.html 中進(jìn)行 cdn 引入。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" rel="external nofollow"  />
    <script src="https://unpkg.com/vue@3.2.16/dist/vue.global.js"></script>
    <link
      rel="stylesheet"
       rel="external nofollow" 
    />
    <script src="https://unpkg.com/element-plus@2.1.8/dist/index.full.js"></script>
    <script src="https://unpkg.com/@element-plus/icons-vue@1.1.4/dist/index.iife.min.js"></script>
    <script src="https://unpkg.com/vuex@4.0.2/dist/vuex.global.js"></script>
    <script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue-router@4.1.6/dist/vue-router.global.js"></script>
    <script src="https://unpkg.com/echarts@5.3.0/dist/echarts.min.js"></script>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <title>Ache</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
  <style></style>
</html>

路由懶加載

在路由中通常會(huì)定義很多不同的頁(yè)面，打包到同一個(gè) js 文件中，文件將會(huì)異常的大，路由懶加載就是將各個(gè)模塊分開(kāi)打包，匹配到對(duì)應(yīng)路由時(shí)再加載對(duì)應(yīng)模塊，減少加載時(shí)間。

也就是說(shuō)，一開(kāi)始進(jìn)入頁(yè)面時(shí)不需要一次性把資源都加載完，需要時(shí)再加載對(duì)應(yīng)的資源。

以下介紹兩種實(shí)現(xiàn)路由懶加載的方式。

1.ES6 的 import()

const routes = [
  {
    path: item.path,
    name: item.name,
    component: () => import(`/src/views/${item.view}.vue`),
  },
];

2.Vite 的 import.meta.glob()

const modules = import.meta.glob("/src/views/*.vue");

const routes = [
  {
    path: item.path,
    name: item.name,
    component: modules[`/src/views/${item.view}.vue`],
  },
];

組件異步加載

在 Vue 3.x 中，異步組件的導(dǎo)入需要使用輔助函數(shù) defineAsyncComponent 來(lái)進(jìn)行顯式聲明。

<script setup>
import { defineAsyncComponent } from "vue";
const child = defineAsyncComponent(() => import("/src/components/child.vue"));
</script>

<template>
  <child></child>
</template>