Vue 3 构建优化：用 Vite 做分包、产物可视化与体积瘦身

先把产物看清楚

优化前先量，别凭感觉砍。rollup-plugin-visualizer 能生成一张交互式依赖图，让你一眼看到是哪个库把包撑大的。

# 安装
npm i -D rollup-plugin-visualizer

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    vue(),
    visualizer({ filename: 'dist/stats.html', gzipSize: true, brotliSize: true })
  ]
})

跑完 build，打开 dist/stats.html，按 gzip 体积排序，针对性处理排在最前面的几个大块。

按路由拆包，首屏只加载当前页

Vue Router 配合动态 import 就能做到路由级懒加载，每个页面独立成 chunk，用户进哪个页才下哪个页的脚本。

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'

export default createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: () => import('@/views/Home.vue') },
    { path: '/about', component: () => import('@/views/About.vue') }
  ]
})

把第三方库单独拆出去

Vue、Element Plus、图表库这类不常变的依赖，用 manualChunks 单独成包，利用浏览器长缓存，业务代码更新时它们不用重新下载。

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          echarts: ['echarts']
        }
      }
    }
  }
})

清理副作用，让 tree-shaking 真正生效

很多库之所以删不掉，是因为被当成有副作用的模块。在 package.json 里把纯模块标注为无副作用，构建器才能放心摇树。

{
  "sideEffects": [
    "*.css",
    "*.scss"
  ]
}

组件库也尽量按需引入。以 Element Plus 为例，用自动按需插件只打包用到的组件：

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

压缩再上一层：开 brotli

Vite 默认只产出 gzip 资源，线上如果支持 br，自己再压一层更省流量。可以用 vite-plugin-compression 在构建期顺带产出 .br 文件。

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    vue(),
    viteCompression({ algorithm: 'brotliCompress' })
  ]
})

小结

路径很固定：先用可视化工具定位大块，路由懒加载砍首屏，第三方库长缓存，按需引入配合 sideEffects 摇树，最后补一层 brotli。每一步都能用 stats.html 的前后对比量化收益，而不是靠体感。