vite拆分打包配置详情,以及碰到的问题和解决方法。

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

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

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

解决方法都在下方例子里

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

方式一:

把node_modules单独打一个包

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

方式二:

npm下每个依赖单独打包

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

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

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

juejin.cn/post/723268...

评论区的AmorDiamond老哥提供思路

javascript 复制代码
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;
},

方式三:

指定依赖单独打包

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

方式四

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

perl 复制代码
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...

相关推荐
web守墓人34 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L40 分钟前
CSS知识复习5
前端·css
许白掰40 分钟前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6738 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
你的人类朋友8 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维