uni-app vue3 vite cli 使用分包后主包vendor.js过大 达到1.4M

在uni-app中使用Vue 3和Vite CLI进行项目构建时，遇到主包vendor.js过大的问题，确实会影响应用的加载速度和用户体验。虽然直接给出具体的代码修改建议可能不太现实（因为每个项目的依赖和配置都有所不同），但我可以提供一个基于Vite和uni-app的分包加载策略，并结合一些通用的代码优化思路。

1. 使用分包加载

uni-app支持分包加载，通过将代码拆分成多个包来减小单个包的体积。你可以在pages.json中配置分包：

{
  "pages": [
    // 主包页面
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "subPackages": [
    {
      "root": "pages/subpkg/",
      "pages": [
        {
          "path": "list/list",
          "style": {
            "navigationBarTitleText": "列表页"
          }
        }
      ]
    }
  ]
}

2. 动态导入和按需加载

对于第三方库或组件库，可以使用动态导入（import()）来按需加载，避免将所有依赖都打包进主包。例如：

// 在需要使用某个库时动态导入
async function loadLibrary() {
  const { default: SomeLibrary } = await import('some-large-library');
  // 使用SomeLibrary
}

3. 外部化依赖

对于体积较大的第三方库，可以考虑将它们作为外部依赖，通过CDN引入，而不是打包进vendor.js。在vite.config.js中配置：

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

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      external: ['vue', 'some-large-library'],
      output: {
        globals: {
          vue: 'Vue',
          'some-large-library': 'SomeLibrary'
        }
      }
    }
  }
});

然后在index.html中通过<script>标签引入这些外部依赖。

4. 代码压缩和Tree Shaking

确保Vite开启了代码压缩和Tree Shaking功能，这可以通过配置production模式下的构建选项来实现。Vite默认在生产模式下会启用这些优化。

总结

通过合理配置分包、动态导入、外部化依赖以及利用Vite的内置优化，可以有效减小vendor.js的体积。不过，每个项目的具体情况不同，需要根据实际情况调整策略。希望这些示例能帮助你找到适合自己的优化方案。