个人开发学习资料库

Appearance

Vite 打包 Vue3 项目体积优化指南 ​

当 Vite 打包的 Vue3 项目体积过大时，可以从以下几个维度进行优化。这些方法涵盖了代码分割、依赖优化、资源压缩和构建配置调整等多个方面：

一、代码分割与按需加载 ​

1. 使用动态导入实现路由懒加载 ​

javascript
// 路由配置示例
const routes = [
  {
    path: '/home',
    name: 'Home',
    // 动态导入组件，实现懒加载
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

2. 对大型组件进行懒加载 ​

javascript
// 在组件中懒加载子组件
import { defineComponent, defineAsyncComponent } from 'vue'

export default defineComponent({
  components: {
    // 异步加载大型组件
    HeavyComponent: defineAsyncComponent(() => import('./HeavyComponent.vue'))
  }
})

二、依赖优化 ​

1. 移除不必要的依赖 ​

检查 package.json，移除未使用的依赖：

bash
npm prune --production

2. 使用 Tree Shaking 剔除无用代码 ​

确保依赖支持 ESM 格式，并在 vite.config.js 中启用：

javascript
export default defineConfig({
  build: {
    rollupOptions: {
      treeshake: true
    }
  }
})

3. 按需引入组件库 ​

以 Element Plus 为例：

bash
npm install unplugin-vue-components unplugin-auto-import -D
javascript
// vite.config.js
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]
})

三、资源压缩与优化 ​

1. 启用 Brotli 或 Gzip 压缩 ​

安装压缩插件：

bash
npm install vite-plugin-compression -D
javascript
// vite.config.js
import compressPlugin from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    compressPlugin({
      algorithm: 'brotliCompress', // 可选 'gzip'
      threshold: 10240, // 大于 10KB 的文件才压缩
    })
  ]
})

2. 压缩图片资源 ​

使用 vite-plugin-imagemin：

bash
npm install vite-plugin-imagemin -D
javascript
// vite.config.js
import viteImagemin from 'vite-plugin-imagemin'

export default defineConfig({
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 7, interlaced: false },
      optipng: { optimizationLevel: 7 },
      mozjpeg: { quality: 80 },
      pngquant: { quality: [0.8, 0.9], speed: 4 },
      svgo: { plugins: [{ name: 'removeViewBox' }, { name: 'removeEmptyAttrs' }] }
    })
  ]
})

四、构建配置优化 ​

1. 调整 build 配置 ​

javascript
// vite.config.js
export default defineConfig({
  build: {
    minify: 'terser', // 替代默认的 esbuild，压缩效果更好
    terserOptions: {
      compress: {
        drop_console: true, // 移除 console
        drop_debugger: true // 移除 debugger
      }
    },
    chunkSizeWarningLimit: 1000, // 增大分块警告阈值（单位 KB）
    rollupOptions: {
      output: {
        // 自定义 chunks 命名，便于缓存和分析
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  }
})

2. 配置 CDN 加速 ​

javascript
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import externalGlobals from 'rollup-plugin-external-globals'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      plugins: [
        // 将 Vue 和 Element Plus 等外部化，通过 CDN 引入
        externalGlobals({
          vue: 'Vue',
          'element-plus': 'ElementPlus'
        })
      ]
    }
  }
})

在 index.html 中添加 CDN 链接：

html
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.prod.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/element-plus@2.3.11/dist/index.full.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/element-plus@2.3.11/dist/index.min.css" rel="stylesheet">
</head>

五、分析与监控 ​

1. 使用可视化工具分析包体积 ​

bash
npm install rollup-plugin-visualizer -D
javascript
// vite.config.js
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({
      open: true, // 构建完成后自动打开分析页面
      gzipSize: true,
      brotliSize: true
    })
  ]
})

2. 使用插件自动清理未使用的 CSS ​

bash
npm install purgecss vite-plugin-purgecss -D
javascript
// vite.config.js
import PurgeCSSPlugin from 'vite-plugin-purgecss'

export default defineConfig({
  plugins: [
    PurgeCSSPlugin()
  ]
})

六、其他优化建议 ​

  1. 使用 Production 模式构建：

    bash
    vite build --mode production

  2. 优化第三方库：

    • 避免使用全量导入（如 import * as moment from 'moment'）
    • 寻找轻量级替代方案（如 day.js 替代 moment.js）

  3. 分离环境变量： 将敏感信息和环境配置移至 .env 文件，避免打包到代码中。

  4. 使用动态 polyfill：

    javascript
    // index.html
<script>
  if (!('Promise' in window)) {
    document.write('<script src="https://cdn.jsdelivr.net/npm/es6-promise@4.2.8/dist/es6-promise.auto.min.js"><\/script>')
  }
</script>

总结 ​

通过以上优化措施，通常可以显著减小 Vue3 项目的打包体积。建议先使用 rollup-plugin-visualizer 分析依赖构成，确定优化重点，再针对性地应用上述方法。