从3.5s到0.8s：我的Vue 3 + Vite应用性能优化实战

// 优化前：静态导入，所有页面打包到一个chunk中
import Home from '@/views/Home.vue'
import UserList from '@/views/UserList.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/users', component: UserList }
]

// 优化后：使用动态导入，生成单独的chunk
const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue') // 会产生一个单独的chunk
  },
  {
    path: '/users',
    component: () => import('@/views/UserList.vue') // 会产生另一个单独的chunk
  }
]

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        // 手动拆包
        manualChunks: (id) => {
          if (id.includes('node_modules')) {
            // 将第三方库拆成单独的chunk
            // 1. 将vue相关的库打包到一起
            if (id.includes('vue') || id.includes('@vue')) {
              return 'vue-vendor'
            }
            // 2. 将element-plus打包到一个 chunk
            if (id.includes('element-plus')) {
              return 'element-plus-vendor'
            }
            // 3. 其他第三方库打包到一起
            return 'vendor'
          }
        }
      }
    }
  }
})

// 错误示例（全量导入）： main.ts
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

// 正确示例（按需导入）： 1. 安装unplugin-vue-components 2. 修改vite.config.ts
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [ElementPlusResolver()], // 自动按需导入Element Plus组件
    }),
  ],
})

// lodash-es 也应使用具名导入，而不是导入整个库
// 错误示例
import _ from 'lodash-es'
_.debounce()

// 正确示例
import { debounce } from 'lodash-es'
debounce()

http {
    gzip on; # 开启gzip
    gzip_min_length 1k; # 大于1KB的文件才压缩
    gzip_comp_level 6; # 压缩级别（1-9），通常6是性价比最高的
    gzip_types text/plain text/css text/xml application/json application/javascript application/xml+rss; # 压缩类型
    gzip_vary on;
}