uniapp vite vue3打包后vendor.js文件过大如何优化

使用uniapp+vite+vue3开发的项目，打包后vendor.js文件体积过大（超过1MB），导致首屏加载缓慢。已经尝试过vite的build.rollupOptions手动分包，但效果不明显。想请教：

除了代码拆分，还有哪些针对uniapp的优化方案？
vue3的按需引入组件是否能显著减小体积？具体如何配置？
第三方库如vant-ui是否存在更优的引入方式？
当前开发环境：HBuilderX 3.8.4，vite 4.3.9。

sinazl 1楼作者

路由懒加载，拆分代码块。
使用CDN引入第三方库，减少vendor体积。
启用gzip压缩，减小传输大小。
分析依赖，移除未使用的库。
开启Tree Shaking，剔除无用代码。

UniApp 使用 Vite + Vue3 打包后 vendor.js 过大的优化方案如下：

1. 代码分割与懒加载

使用动态 import() 分割路由组件：

// pages.json 或路由配置
const pages = [
  {
    path: '/home',
    component: () => import('@/pages/home.vue') // 懒加载
  }
]

2. 依赖分析优化

安装 rollup-plugin-visualizer 分析包内容：

npm i -D rollup-plugin-visualizer

在 vite.config.js 中配置：

import { visualizer } from 'rollup-plugin-visualizer'
export default defineConfig({
  plugins: [visualizer({ open: true })]
})

3. 外部化依赖（Externalize）

将大型库（如 Vue）排除打包，通过 CDN 引入：

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

在 index.html 中添加 CDN 链接：

<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.js"></script>

4. 压缩与 Tree Shaking

Vite 默认启用 Tree Shaking，确保代码使用 ES 模块语法。
生产构建自动压缩，可检查配置：

// vite.config.js
export default defineConfig({
  build: {
    minify: 'terser', // 默认启用
    terserOptions: {
      compress: {
        drop_console: true // 移除 console
      }
    }
  }
})

5. 检查重复依赖

运行 npm ls 检查版本冲突，统一依赖版本。
使用 vite-bundle-analyzer 可视化分析重复模块。

6. 分包策略（Chunk Splitting）

配置 manualChunks 分割公共模块：

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router'],
          utils: ['lodash-es', 'axios']
        }
      }
    }
  }
})

7. 图片与静态资源优化

压缩图片，使用 WebP 格式。
静态资源通过 CDN 托管，减少打包体积。

8. 按需引入组件库

若使用 UI 库（如 Vant），按需引入：

import { Button } from 'vant';
app.use(Button);

总结步骤：

使用分析工具定位大文件来源。
通过懒加载、外部化、分包减少主包体积。
压缩代码并移除无用依赖。
持续监控打包结果，调整优化策略。

执行 npm run build 后检查 dist/report.html 分析效果。

回到顶部