运行npm run build时出现跳过较大chunk、代码块体积超阈值警告如何处理

执行npm run build打包前端项目时触发的该警告是Rollup/Vite内置的体积校验机制，默认当单个chunk压缩后体积超过500KiB时触发，目的是避免单文件体积过大导致首屏加载性能下降，可按实际业务场景选择对应方案处理：

方案1：使用动态import()做代码分割（优先推荐，可实际降低加载体积） #

对非首屏的页面、组件采用动态导入写法，实现访问时按需加载，从根本上拆分过大的入口chunk，示例写法如下：

• Vue路由懒加载示例

// 原同步导入写法
import UserDetail from './pages/UserDetail.vue'
// 替换为动态导入写法
const UserDetail = () => import('./pages/UserDetail.vue')

• React组件懒加载示例

import { Suspense, lazy } from 'react'
// 动态导入组件
const UserDetail = lazy(() => import('./pages/UserDetail'))

// 组件使用时配合Suspense处理加载态
function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <UserDetail />
    </Suspense>
  )
}

方案2：配置manualChunks手动拆分公共依赖 #

将第三方依赖、公共工具代码和业务代码拆分为独立chunk，避免全部打包到同一个文件导致体积超限，可在项目打包配置文件（如vite.config.js）中添加如下配置：

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // 拆分框架核心依赖为单独chunk
          'framework': ['vue', 'vue-router', 'pinia'],
          // 拆分UI组件库为单独chunk
          'ui-lib': ['element-plus'],
          // 拆分公共工具库为单独chunk
          'common-utils': ['lodash-es', 'axios']
        }
      }
    }
  }
})

拆分后的公共chunk可被浏览器长期缓存，也能降低单次加载的资源体积。

方案3：调整警告触发阈值（仅建议非面向用户的内部项目使用） #

如果已经完成性能评估，确认当前chunk体积符合业务要求，可直接修改警告触发阈值屏蔽提醒，配置示例如下：

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    // 将警告阈值调整为1000KiB，可根据实际需求修改
    chunkSizeWarningLimit: 1000
  }
})

注意：该方案仅屏蔽警告提示，不会实际减小chunk体积，面向C端用户的生产项目不推荐直接使用该方案

内容的提问来源于stack exchange，提问作者Haseeb Saeed