半秒开！还有谁！！！

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

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

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

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

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