uni-app升级到UniApp3 + Vite后，发现主包体积明显变大，manualChunks不好使？

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app升级到UniApp3 + Vite后，发现主包体积明显变大，manualChunks不好使？

升级到UniApp3 + Vite后，发现主包体积明显变大，manualChunks不好使？

webpack下是可以允许某一个chunk（比如chunkA）不打到common vendor里面的，这样其他分包用到chunkA，会在其他分包里面复制一份chunkA；

希望得到的支持， 是否可以有类似webpack的机制， 如果一个chunk没有被使用到N次，该chunk就不用打包到主vendor里面

Harmonyos Next教程
1 回复

在将uni-app升级到UniApp3 + Vite后，确实可能会遇到主包体积变大的问题，这通常是由于构建配置和依赖处理方式的变化所导致的。manualChunks 是 uni-app 传统的构建配置，用于手动拆分代码块，但在 Vite 环境下，该配置可能不再适用或效果不如预期。

在 Vite 中，代码拆分和打包主要由 Rollup 处理，而 Vite 提供了一些与 Rollup 兼容的配置选项来优化打包结果。以下是一些针对 UniApp3 + Vite 的代码优化策略，包括如何手动拆分代码和减少主包体积：

1. 使用 optimizeDeps 配置

Vite 在启动时会对依赖进行预构建，以提高后续构建的速度。你可以通过配置 optimizeDeps 来控制哪些依赖应该被预构建。

// vite.config.js
export default defineConfig({
  optimizeDeps: {
    include: ['some-large-dependency'], // 仅预构建指定的依赖
    exclude: ['excluded-dependency'] // 排除不需要预构建的依赖
  }
});

2. 利用 Rollup 的 input 和 output 配置

虽然 UniApp3 封装了 Vite，但你仍然可以通过修改 vite.config.js 来利用 Rollup 的高级功能。以下是一个示例，展示如何拆分代码：

// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, 'src/main.js'), // 主入口
        vendor: path.resolve(__dirname, 'src/vendor.js') // 第三方库入口（可选）
      },
      output: {
        dir: 'dist',
        entryFileNames: '[name].js',
        chunkFileNames: '[name]-[hash].js',
        assetFileNames: '[name]-[hash].[ext]'
      }
    }
  }
});

注意：这里的 vendor.js 是你手动创建的，用于引入所有第三方库，以便将其拆分到单独的包中。

3. 动态导入和代码拆分

在代码中，使用动态导入（import()）来按需加载模块，这有助于减小初始加载的包体积。

// 在需要时动态加载模块
function loadModule() {
  return import('./someModule.js').then(module => {
    // 使用加载的模块
    module.default();
  });
}

结论

由于 UniApp3 + Vite 的构建系统较传统 uni-app 有所不同，因此你可能需要调整构建配置以适应新的环境。上述方法提供了如何利用 Vite 和 Rollup 的特性来优化打包结果的一些思路。务必根据你的具体项目情况进行调整和测试。

回到顶部