半秒开！还有谁！！！

这是我的网站登录页目前加载时间，毫秒级加载，嗖的一下就出来啦，现在总结一下怎么做到的

一，路由 懒加载，这是常规操作

二，UI组件库动态导入

一定不要在入口main.js里全部注册组件,使用插件动态自动导入

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']
这是第一版,我感觉还有可优化空间，就换了个策略，果真，进步很大

output: {
  manualChunks: {
    // 把 Vue 全家桶单独打包
    'vue-vendor': ['vue', 'vue-router', 'pinia'],
    // 把 UI 库单独打包
    // 'ui-vendor': ['element-plus'], 组件库动态导入，不能加这个
    // 把图表库单独打包
    'chart-vendor': ['echarts'],
    'three':['three']
  }
}

以下是目前的配置

output: {
    manualChunks: { 
    // 只保留 Vue 核心，让 UI 库自动按需分包 
    'vue-core': ['vue', 'vue-router', 'pinia'],
    }, 
    // 让 Vite 自动优化 chunk 分割 
    chunkFileNames: 'assets/[name]-[hash].js',
 }

四，nginx开始Gzip压缩

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

五，还有其他零碎的方法，巴拉巴拉一大堆

1. 开启 HTTP/2 需要https证书，我没有 2. CDN 加速 我没有弄 3. 图片懒加载 图片少，没有弄 4. 还有我没有想起来啦，朋友们补充下