之前自己的项目当中，对于分包的概念仅停留在前后端分离以及我做开源项目时，已有的项目进行了分包，包与包之间变量和方法的相互调用等，上线项目也没有特意为分包方案做具体的配置。但在现代前端开发中，提高应用程序的加载性能是一个永恒的追求！而分包（代码分割）技术在这方面提供了强有力的支持。
本博客聚焦于 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']}}}}
}
-
vendor 包：将常用的第三方库（如
vue）打包在一起。这样可以确保这些库只在必要时加载，并且提升了缓存利用率。 -
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';}}}}}
}
-
模块路径判断：通过检查
id（即模块的路径），可以将node_modules中的所有模块静态分包到vendor中。 -
灵活性：假如项目有特殊目录结构，或者有特定命名规范的文件，可以通过函数逻辑处理。