vite的分包

在 Vite 项目中，打包时的分包策略主要通过配置  build.rollupOptions.output  来控制，核心包括以下几个维度：

 

一、默认分包规则

 

Vite 基于 Rollup 打包，默认分包逻辑如下：

 

1. 依赖与业务代码分离

- 第三方依赖（如  node_modules  中的库）会被自动拆分为独立 chunk（如  vendor.js ），避免与业务代码混合。

- 原因：依赖更新频率低，单独打包可利用浏览器缓存。

2. 路由或组件懒加载分包

- 对  import('./module.js')  动态导入的模块，会自动生成独立 chunk（如  module.[hash].js ）。

 

二、手动配置分包维度

 

通过  vite.config.js  中的  build.rollupOptions.output  可自定义分包策略，常用配置如下：

 

1. 按文件类型或路径分包

 

// vite.config.js

export default {

  build: {

    rollupOptions: {

      output: {

        // 按文件夹分组（如将 utils 目录下的文件打包到 utils 文件夹）

        manualChunks(id) {

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

            // 第三方依赖按包名分包（如 react、vue 单独打包）

            return id.toString().split('node_modules/')[1].split('/')[0].toString();

          }

          if (id.includes('/utils/')) {

            return 'utils';

          }

          if (id.includes('/components/')) {

            return 'components';

          }

          // 其他业务代码按默认规则处理

        }

      }

    }

  }

}

 

 

2. 控制 chunk 大小阈值

 

-  chunkFileNames ：定义 chunk 文件名格式，可结合哈希值区分版本。

-  manualChunks  配合  maxFileSize （Vite 2.7+ 支持）：

export default {

  build: {

    rollupOptions: {

      output: {

        // 单个 chunk 超过 500KB 时自动拆分

        chunkFileNames: 'assets/chunks/[name]-[hash].js',

        manualChunks: {

          // 示例：将 lodash 单独打包

          lodash: ['lodash']

        },

        // Vite 4 中使用 `chunkSizeWarningLimit` 控制警告阈值

        chunkSizeWarningLimit: 500

      }

    }

  }

}

 

 

3. 缓存分组（长期缓存优化）

 

- 将更新频率低的代码（如框架、工具库）与高频更新的业务代码分离：

manualChunks: {

  // 第三方库单独分组

  vendor: ['react', 'react-dom'],

  // 工具函数分组

  utils: ['@/utils/request', '@/utils/format'],

  // 业务页面按模块分组（如 dashboard 页面相关代码）

  dashboard: ['@/pages/dashboard/index']

}

 

 

三、分包效果验证

 

打包后可通过以下方式查看分包结果：

 

1. 在  dist  目录中查看生成的 JS 文件，按命名规则判断分组是否符合预期。

2. 使用  rollup-plugin-analyzer  或  vite-plugin-bundle-analyzer  分析包体积分布：

# 安装分析插件

npm install -D rollup-plugin-analyzer

 

 

// vite.config.js

import { defineConfig } from 'vite'

import analyzer from 'rollup-plugin-analyzer'

 

export default {

  build: {

    rollupOptions: {

      plugins: [analyzer()] // 打包后生成分析报告

    }

  }

}

 

 

四、最佳实践

 

- 按需分包：优先拆分高频访问或体积大的模块，避免过度拆分导致请求数过多。

- 结合路由懒加载：对单页应用的路由组件使用  import()  动态导入，自动生成独立 chunk。

- 关注网络性能：单个 chunk 建议控制在 200KB 以内（移动端可更低），减少首屏加载时间。

 

通过以上配置，可灵活控制 Vite 打包时的分包粒度，平衡加载速度与缓存效率。