组件懒加载重复打包的本质是构建工具未识别多处异步引用同一模块，应通过 splitchunks.cachegroups 显式抽离公共依赖、统一动态导入路径、排查无意重复引用，并优先使用标准配置而非魔法方案。

组件懒加载时重复打包，本质是 Webpack（或 Vite）对动态 import() 的分割策略未识别出“同一模块被多处异步引用”，导致相同依赖被多次打进不同 chunk。关键不是禁用懒加载，而是让构建工具知道：哪些模块该被单独提取、复用。

显式抽离公共异步依赖

当多个懒加载组件都用到 lodash、axios 或自定义的 utils 时，不要让它们各自打进各自的 chunk。在 Webpack 中通过 splitChunks.cacheGroups 显式声明：

• 匹配所有异步引入中出现的 node_modules 模块，强制归入 vendor chunk
• 对项目内高频复用的工具模块（如 @/utils/request），也加入 cacheGroups，指定 name: 'shared-utils'
• 设置 enforce: true 避免受 minSize 限制，确保小但公用的模块也能被抽离

统一懒加载入口 + 动态路径约束

避免写多个零散的 import('./A.vue')、import('./B.vue') —— 这会让 Webpack 认为它们是完全独立的请求。改用集中式路由/组件注册：

改图鸭AI图片生成

改图鸭AI图片生成是一款面向在线作图、修图和 AI 生图的图片处理工具。

下载

• 路由配置中统一用 component: () => import(`@/views/${name}.vue`)，Webpack 能识别这是“同一类动态导入”，更易合并 chunk
• 禁止在不同文件里用不同字符串拼接路径（如 import('./a') vs import('./A')），大小写或路径差异都会触发新 chunk
• Vite 用户可配合 build.rollupOptions.output.manualChunks，按目录或包名手动分组

检查并剔除无意的重复引用

有些重复不是构建配置问题，而是代码引入方式导致：

• 组件 A 懒加载了 Chart.vue，而 Chart.vue 内部又 import('@/utils/format')；同时组件 B 也懒加载了另一个用到 format 的组件 → 若 format 未被提前抽离，就会打两份
• 排查方式：构建后查看 stats.json（Webpack）或 dist/.vite/manifest.json（Vite），搜索模块名，确认是否出现在多个 chunk 中
• 修复：把 format 改为同步引入到入口文件，或通过 providePlugin（Webpack）/ optimizeDeps.include（Vite）提前预编译

用魔法但别滥用魔法

Webpack 的 experiments.topLevelAwait: true 或 Vite 的 dynamicImportVars 插件虽能增强分析能力，但可能带来兼容性或缓存问题。优先走标准 cacheGroups + 显式路径约束，稳定可控。真要上高级策略，务必配上构建产物分析工具验证效果。