Vite的动态导入优化在新版本变慢了怎么办？

夏侯恒菽提问于 2026-02-04 21:28:25 阅读 26

前端

最近在升级项目到Vite 4时发现动态导入的代码分割反而更慢了，明明按照文档配置了build.rollupOptions.output.manualChunks，但打包后的vendor.js还是有3MB，运行时加载时间比旧版长

尝试过把依赖拆分成import('lodash/fp')这种形式，但发现每个模块都重复打包了相同的底层依赖。用vite inspect查看依赖图时发现某个UI库的子模块被错误地分到不同chunk里了

难道是新版本的treeshaking机制有变化？或者应该改用Esbuild的打包策略？有没有更好的代码分割配置方案？

我来解答赞 8 收藏

反馈

2 条解答

仙仙 Lv1

这问题我之前也踩过，Vite 4默认的chunk分割策略确实变得更激进了，但手动分块没生效多半是因为manualChunks配置方式不对。你得确保同一个依赖只被一个chunk引用，否则会重复打包。

可以优化成这样：

build: {

  rollupOptions: {

    output: {

      manualChunks: (id) => {

        if (id.includes('node_modules')) {

          // 把所有UI库相关模块归到同一组

          if (id.includes('@your-ui-lib') || id.includes('lodash')) {

            return 'vendor-ui'

          }

          // 其他第三方库统一打成一个

          return 'vendor'

        }

      }

    }

  }

}

另外注意Vite 4默认用的是Rollup 3，Tree-shaking比之前严格，但如果某个UI库内部模块之间有循环引用，会导致它被拆散。你可以加个插件强制合并：

import { defineConfig } from 'vite'



export default defineConfig({

  build: {

    commonjsOptions: {

      include: [/node_modules/, /@your-ui-lib/]

    },

    rollupOptions: {

      // 上面的manualChunks...

    }

  }

})

最后建议开一下build.reportCompressedSize: false，不然gzip计算也会拖慢构建。真要追求速度，可以切esbuild的打包实验性选项，但稳定性不如Rollup，我们线上还是用上面这套稳得很。

2026-02-09 10:10

UP主～志红 Lv1

这个问题我也遇到过，确实不是简单的配置就能解决的。首先，Vite 4 默认使用了更保守的 chunk 分割策略，特别是在处理动态导入时，如果你手动配置了 manualChunks，但没处理好依赖图的拓扑排序，很容易把重复的依赖拆散，导致多个 chunk 都引入了相同底层依赖（比如你提到的 UI 库子模块问题）。

我建议你先从这几个方面排查：

1. **优化 manualChunks 的粒度**
把共享依赖（如 lodash, dayjs 等）单独抽成一个 chunk，避免重复打包。例如：

manualChunks: {

     vendor: (id) => {

       return id.includes('node_modules') && !id.includes('react') && !id.includes('vue');

     },

     react: (id) => id.includes('node_modules/react'),

     yourUILib: (id) => id.includes('your-ui-lib')

   }

这样能避免你 UI 库的子模块被拆散到多个 chunk，导致重复加载。

2. **使用依赖图分析工具**
vite inspect 虽然有用，但信息有限。你可以使用 [rollup-plugin-visualizer](https://www.npmjs.com/package/rollup-plugin-visualizer) 来生成 bundle 的可视化报告，看看哪些模块被重复打包了。

3. **升级到 Vite 4.5+**
后续版本对代码分割有优化，特别是对动态导入的依赖分析更智能。如果你用的是 4.0.x，建议升级到 4.5 或更高。

4. **考虑使用 esbuild 进行 vendor 预打包**
如果你有大量第三方模块，可以尝试配置 optimizeDeps，让 Vite 在 dev 模式下用 esbuild 快速预打包依赖，加快热启动速度：

optimizeDeps: {

     include: ['lodash', 'your-ui-lib', 'moment']

   }

注意安全：不要随便 include 所有依赖，只 include 你实际用到的大型模块，否则会拖慢预打包过程。

5. **Tree-shaking 不一定变差**
Vite 4 的 treeshaking 是基于 Rollup 3 的，理论上更强大。但如果你的依赖本身打包方式有问题（比如用了 require 同步导入），treeshaking 就会失效。建议检查依赖的模块类型，尽量使用 ESM。

如果你已经做了以上尝试还是慢，那可能是你的 chunk 分得太细了，反而增加了浏览器并发加载负担。建议保持 chunk 数量在 5~10 个之间，不要为了“拆”而拆。

2026-02-04 22:00