小編精選 - 技術文章翻譯 · 07月05日

首屏載入半秒就開！還有誰！！！

首屏載入半秒搞定！還有誰！！！

**這是我的網站登入頁目前的載入時間，毫秒級載入，嗖的一下就出來了，現在總結一下怎麼做到的**

一、路由懶載入，這是常規操作

二、UI 元件庫動態匯入

一定不要在入口 main.js 裡全部註冊元件，使用外掛動態自動匯入

css 代碼解讀複製代碼import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
...
...
plugins: [
  vue(),
  AutoImport({
    resolvers: [ElementPlusResolver()],
  }),
  Components({
    resolvers: [ElementPlusResolver()],
  }),
],

三、合適的分包策略

我的專案有一鍵打包部署的指令，有興趣可以找找我之前的部落格 # 一條命令實現打包並自動部署有了這個工具，改了設定之後可以一鍵部署看效果，實踐是檢驗真理的唯一標準
這裡有個點要非常注意：已經使用元件動態匯入，就不要這一行。'ui-vendor': ['element-plus']
這是第一版，我覺得還有可優化空間，就換了個策略，果真，進步很大

arduino 代碼解讀複製代碼output: {
  manualChunks: {
    // 把 Vue 全家桶單獨打包
    'vue-vendor': ['vue', 'vue-router', 'pinia'],
    // 把 UI 庫單獨打包
    // 'ui-vendor': ['element-plus'], 元件庫動態匯入，不能加這個
    // 把圖表庫單獨打包
    'chart-vendor': ['echarts'],
    'three':['three']
  }
}

以下是目前的設定

css 代碼解讀複製代碼output: {
    manualChunks: { 
    // 只保留 Vue 核心，讓 UI 庫自動按需分包 
    'vue-core': ['vue', 'vue-router', 'pinia'],
    }, 
    // 讓 Vite 自動優化 chunk 分割 
    chunkFileNames: 'assets/[name]-[hash].js',
 }

四、nginx 開始 Gzip 壓縮

bash 代碼解讀複製代碼gzip on;
gzip_min_length 1k;
gzip_comp_level 6;
gzip_types text/plain text/css text/xml text/javascript application/json application/javascript application/xml+rss application/rss+xml application/atom+xml application/ld+json application/manifest+json image/svg+xml;
gzip_http_version 1.1;
gzip_vary on;
gzip_disable "msie6";