This is the current load time of my website's login page — millisecond-level loading, it pops up in a flash. Here's a summary of how it was achieved.

1. Route lazy loading — this is standard practice

2. Dynamic import of UI component library

Never register all components in the entry main.js. Use a plugin for dynamic auto-importing.

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()],
  }),
],

3. A suitable chunking strategy

My project has a one-click build and deploy command. If you're interested, you can look for my previous blog post. # One command to build and auto-deploy With this tool, after changing the configuration, you can deploy with one click to see the effect. Practice is the sole criterion for testing truth.
One point to be very careful about: if you are already using dynamic component imports, do not include this line. 'ui-vendor': ['element-plus']
This was the first version. I felt there was still room for optimization, so I switched strategies, and indeed, there was significant improvement.

output: {
  manualChunks: {
    // Package the Vue ecosystem separately
    'vue-vendor': ['vue', 'vue-router', 'pinia'],
    // Package the UI library separately
    // 'ui-vendor': ['element-plus'], // Cannot add this if the component library is dynamically imported
    // Package the chart library separately
    'chart-vendor': ['echarts'],
    'three':['three']
  }
}

Here is the current configuration

output: {
    manualChunks: { 
    // Only keep the Vue core, let the UI library auto-split on demand
    'vue-core': ['vue', 'vue-router', 'pinia'],
    }, 
    // Let Vite automatically optimize chunk splitting
    chunkFileNames: 'assets/[name]-[hash].js',
 }

4. Enable Gzip compression in Nginx

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";

5. There are other miscellaneous methods, a whole bunch of them

1. Enable HTTP/2 — requires an HTTPS certificate, which I don't have.
2. CDN acceleration — I haven't set this up.
3. Image lazy loading — few images, so I didn't set this up.
4. I can't think of any more right now, friends, please add to the list.