之前自己的项目当中，对于分包的概念仅停留在前后端分离以及我做开源项目时，已有的项目进行了分包，包与包之间变量和方法的相互调用等，上线项目也没有特意为分包方案做具体的配置。但在现代前端开发中，提高应用程序的加载性能是一个永恒的追求！而分包（代码分割）技术在这方面提供了强有力的支持。
本博客聚焦于 Vite中的手动分包技术，主要的手动分包方式：静态分包和动态分包。

一。什么是手动分包？

分包是将应用程序的代码拆分成更小、更易管理的块，以便在需要时动态加载。通过减少初始加载时间，我们可以大幅提高应用性能。在 Vite 中，手动分包就是通过配置，明确地指定哪些模块应该分入一个包。

比如说我们对代码进行修改后重新打包，会导致文件指纹发生变化，从而引发一些潜在问题，我们可以把外部引入的模块放在同一个包当中，将开发代码放在一个包当中，这样子修改后重新构建就只会修改开发代码所在的包。

方法一：静态分包

静态分包是一种较为直接的方法，它允许我们在 Vite 的配置中明确地定义每个分包包含的模块。这对于结构相对稳定的项目来说非常有用。

🌰示例

在 vite.config.js 文件中，可以通过 rollupOptions.output.manualChunks 来实现：

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue'],
          utils: ['./src/utils/module1.js', './src/utils/module2.js']
        }
      }
    }
  }
}

1. vendor 包：将常用的第三方库（如 vue ）打包在一起。这样可以确保这些库只在必要时加载，并且提升了缓存利用率。

2. utils 包：将应用自定义工具（如 utils 目录中的模块）打包，减少每个页面的初始加载代码。

方法二：动态分包

动态分包提供了一种更为灵活的方法，通过对模块路径的动态判断进行分包，在项目结构复杂或者可能频繁变化时很有用。

🌰例子

动态分包允许我们返回一个函数来处理分包逻辑：

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          if (id.includes('node_modules')) {
            return 'vendor';
          }
          if (id.includes('src/utils')) {
            return 'utils';
          }
        }
      }
    }
  }
}

1. 模块路径判断：通过检查 id （即模块的路径），可以将 node_modules 中的所有模块静态分包到 vendor 中。

2. 灵活性：假如项目有特殊目录结构，或者有特定命名规范的文件，可以通过函数逻辑处理。