最近在做一个小项目，玩一下分包碰到了不少的问题，在此记录一下。

pnpm下每个依赖单独打包不生效问题

分包生效但是部署报错问题

解决方法都在下方例子里

题外话：最近在找前端工作，有不卡本科工作机会的可以推一下，地点最好是成都/上海的。

方式一：

把node_modules单独打一个包

manualChunks(id) {
// 分两个包
if (id.includes("node_modules")) {
  return "vendor";
}
},

方式二：

npm下每个依赖单独打包

manualChunks(id) {
// 有多少模块就分多少包
// npm写法
 if (id.includes("node_modules")) {
   return id
     .toString()
     .split("node_modules/")[1]
     .split("/")[0]
     .toString();
 }
},

pnpm下每个依赖单独打包会不生效

项目使用的pnpm时，这个规则会把所有的依赖打包在一个文件，pnpm的文件路径有点不一样

评论区的AmorDiamond老哥提供思路

manualChunks(id) {
// 尝试匹配 npm 或 pnpm 的 node_modules 路径格式
const npmPattern = /node_modules/(.+)/node_modules//;
const pnpmPattern = /node_modules/(@[^/]+/[^/]+)/node_modules//;

// 检查是否是 npm 格式的路径
let match = id.toString().match(npmPattern);
if (match) {
  return match[1];
}

// 检查是否是 pnpm 格式的路径
match = id.toString().match(pnpmPattern);
if (match) {
  // pnpm 路径中，第一个分割的部分是包的 scope 名称，需要保留
  return match[1];
}

// 如果都不是，则不进行分包
return undefined;
},

方式三：

指定依赖单独打包

manualChunks = {
  // 使用 legacy 会导致报错
  manualChunks: {
    elementplus: ["element-plus"],
    vue: ["vue"],
    // leafer: ["leafer-ui", "leafer-in"],
  },
};

方式四

指定依赖单独打包，剩下的依赖打包到 vendor，代码逻辑打包到 index

manualChunks(id) {
// 创建一个对象映射，用于存储库名及其对应的chunk名称
const libraryChunkMap = {
  "element-plus": "element-plus",
  // vue: "vue",
  // "leafer-in": "leafer",
  // "leafer-ui": "leafer",
};

// 检查模块ID是否包含'node_modules'，即是否为第三方依赖
if (id.includes("node_modules")) {
  // 遍历libraryChunkMap的键（即库名），查找与模块ID存在包含关系的库名
  const matchedLibrary = Object.keys(libraryChunkMap).find((library) =>
    id.includes(library)
  );

  // 如果找到了匹配的库名，返回对应的chunk名称（从libraryChunkMap中获取）
  if (matchedLibrary) {
    return libraryChunkMap[matchedLibrary];
  } else {
    // 如果未找到匹配的库名，将该第三方依赖归入默认的'vendor' chunk
    return "vendor";
  }
} else {
  // 如果模块ID不包含'node_modules'，即不是第三方依赖，则将其归入'index' chunk
  return "index";
}
},

分包生效但是部署报错问题解决方法

经过反复排查是因为 @vitejs/plugin-legacy 插件导致的

之前使用这个插件是为了让打包出来的文件可以直接在浏览器运行，纯离线的工具随处运行更方便。

所以现在的解决方法就是在 legacy 模式下不使用分包

增加打包模式，环境变量配置

在vite.config.js判断一下就行了

具体代码省略

有需要可以在我的这个小项目里面查看一下。

github.com/wumingluren…