执行yarn build出现代码块过大警告，yarn dev运行正常

下面是几种针对该警告的解决办法，按优化优先级排序：

1. 使用动态导入实现代码分割 #

将项目中体积较大的组件、路由或功能模块改为异步加载方式，打包时Vite会自动把这些模块拆分成独立的chunk，避免单个chunk体积超标。

比如在路由配置中，把静态导入改为动态导入：

// 原来的静态导入
import UserDashboard from './views/UserDashboard.vue'

// 改为动态导入
const UserDashboard = () => import('./views/UserDashboard.vue')

对于非路由的大型组件，也可以用同样方式在需要时异步加载：

async loadHeavyComponent() {
  const { HeavyChartComponent } = await import('./components/HeavyChartComponent.vue')
  // 渲染组件逻辑
}

2. 配置manualChunks手动拆分Chunk #

通过Vite的build.rollupOptions.output.manualChunks配置，自定义chunk拆分规则，比如把第三方依赖、不同业务模块分别打包成独立的chunk。

在vite.config.js或vite.config.ts中添加如下配置：

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          // 将所有第三方依赖单独拆分为chunk
          if (id.includes('node_modules')) {
            return 'vendor';
          }
          // 按业务模块拆分，比如把用户相关模块打包成一个chunk
          if (id.includes('src/modules/user')) {
            return 'user-module';
          }
          // 把admin相关模块打包成另一个chunk
          if (id.includes('src/modules/admin')) {
            return 'admin-module';
          }
        }
      }
    }
  }
})

这种方式可以更精准地控制chunk拆分逻辑，根据项目结构灵活调整。

3. 调整警告阈值（仅隐藏警告） #

如果你的项目chunk大小在可接受范围内，只是不想看到这个警告，可以修改build.chunkSizeWarningLimit参数，提高触发警告的体积阈值（默认是500KB）。

配置示例：

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    chunkSizeWarningLimit: 1000 // 单位：KB，这里设置为1000KB
  }
})

注意：这个方法只是隐藏警告，并没有优化chunk体积，建议优先使用前两种方法来优化项目加载性能。

内容的提问来源于stack exchange，提问作者Zahid Hassan Shaikot