哎呀，这事儿啊，说实话，我跟你聊聊也算是老友记了。

Zui近项目里头主包体积炸裂，真是让人抓狂。

咱们先把问题摆在这儿——怎么把非主包组件搬走，让主包瘦身？

先别急，我这就慢慢掰着说。

本项目是 uniapp 项目，所以迁移的组件后缀必须是 .vue。

原生语言或者别的框架直接甩过去根本没法用。

之前所有组件dou塞在 src/components 里结果主包直接爆表——超过了微信小程序那两个多兆的上限。

后来我们把一些和主包无关的组件搬进对应分包，但还有几个尴尬的小家伙，它们虽然在主包页面里没有被引用，却被好几个分包页面共享，于是只Neng硬生生地留在主包。

先遍历所有组件，kankan它们到底被哪些页面引用。

Ru果全dou是分包页面那就Ke以把它们复制过去。

Ru果哪怕只要一个主包页面用了那只Neng留下来——否则运行时肯定报错。

听起来挺直白，但实现细节可不是这么简单。

const taskMap = {};
const changeFileMap = {};
const deleteFileMap = {};
// 分发组件
async function distributionComponents {
  for  {
    const componentInfo = componentsMap;
    // 未被主包引用的组件
    for  {
      // 将组件复制到分包
      if ) {
        // 将组件复制到页面所在分包
        await copyComponent;
      }
    }
  }
}
/** 
 * 复制组件 
 * @param {*} componentPath 
 * @param {*} targetPath 
 * @returns 
 */
async function copyComponent {
  const componentInfo = componentsMap;
  if  return;
  const key = `${componentPath}_${pagePath}`;
  // 避免重复任务
  if  return;
  taskMap = true;
  const subPackageRoot = getSubPackageRootByPath;
  if  return;
  const componentFilePath = transferComponentPathToFilePath;
  const subPackageComponentsPath = path.join;
  const newComponentFilePath = path.join(
    subPackageComponentsPath,
    path.basename
  );
  const newComponentsPath = newComponentFilePath
    .replace
    .replaceAll
    .replaceAll;
  // . 复制组件及其资源
  await copyComponentWithResources(
    componentFilePath,
    subPackageComponentsPath,
    componentInfo
  );
  // . 递归复制引用的组件
  if  {
    let tasks = ;
    componentInfo.quotes.map => {
      // 复制子组件
      tasks.push);
      const subComponentInfo = componentsMap;
      if  {
        // 修改组件引用的子组件路径
        const newSubComponentFilePath = path.join(
          subPackageComponentsPat h,
          path.basename
        );
        const newSubComponentsPat h = newSubComponentFileP ath
          .replace
          .replaceAll
          .replaceAll;
        updateChangeFileInfo(
          newComponentFilePat h,
          quote_path,
          newSubComponentsPat h
        );
      }
    });
    await Promise.all;
 }
 // . 修改页面引用当前组件路径
 updateChangeF ileInfo;
 // . 删除当前组件 
 updateDeleteFil eInfo;
}
/** geng新删除文件信息 */
function updateDeleteFileInfo{deleteF ileM ap=true;}
/** geng新修改文件内容信息 */
function updateChangeFi leInfo{
 if{
   changeFil eMap=;
 }
 changeFil eMap.push;
}
/** 删除文件任务 */
async function deleteFil e{
 for{
   try{
     await fs.promises.unlink.catch;
   }catch{
     console.error;
   }
 }
}
/**复制组 件及其资源 */
async function copyComp onentWithResources{
 await new Promise=>{src.pipe).on;});
 const content=await fs.promises.readFile;
 const relativePaths=extractRelativePaths;
 await Promise.all=>{
   const resou rceSrcPat h=path.join;
   const resou rceDestPa th=path.join);
   await new Promise=>{src.pipe).on;});
 }));
}

这个坑啊，我跟你讲哈——相对路径会导致资源找不到，一定要改成绝对或者 alias 的方式。

gitee.com/zhangkb/exa…

代码仅在 windows 系统下跑过别的平台可Neng会踩坑。

为什么百度不收录? 哈哈，这个问题经常被问到。

A：可Neng是因为页面没有Zuo好 meta 信息，或者 robots.txt 把它屏蔽了；再者，Ru果内容太薄弱、重复率高，也会被过滤掉。

B：还有就是站点访问速度慢、服务器响应时间长，dou让爬虫打起了哈欠。

C：Zui后一点，就是你的站点没有提交 sitemap 给百度搜索平台，自然就没人来抓取啦！懂吧？咱就是说这些dou是常见原因，你得逐一排查一下才行。

接下来我们要Zuo的是：

// 获取分 包根目录函数 ...

遍历所有 {referForMainPackage:false} 的组件，把它们拷贝进对应分 包，然后geng新所有页面和子组件里的 import 路径。

/** 修改页面引用路径 */
async function changePageResourceP ath{
 for{
   const list=changeF ileMa p;
   await new Promise=>{
     src
       .pipe=>{
         let content=String;
         for{
           content=content.replaceAll;
         }
         file.contents=Buffer.from;
       }))
       .pipe))
       .on;
   });
 }
}

先说个笑话吧——有次我把一个公共弹窗放进了每个分 包，却忘记改路径，结果线上报错全挂起，我当时真是懵逼到极点。

#1 那个弹窗其实只在首页用了可我误以为全局dou要用，于是拷贝了十几遍……哈哈，现在回想起来dou觉得自己蠢萌萌哒。

#2 别忘了geng新 @/components/xxx.vue 的 alias，在某些页面里硬写相对路径，就算你Yi经搬走，它还是指向旧位置，好像灵异事件一样报错！呃，不对，是我疏忽啦～改成 alias 后就顺利多了。

#3 Zui后提醒一下大多数情况下你只需要关注"哪些页面真正用了这个组件", 那么那些孤立未被使用的，就大胆删掉或迁移吧！真的Neng省不少体积呢~ 咱就是说这一步Zui关键！你懂的？哈哈哈~

总之啊，把非主包组 件迁移出去，是件技术活也是艺术活——既要保证功Neng完整，又得控制体积，否则上线后用户体验直线下降，那可真叫人心疼呀！

说实话，我也曾因为盲目追求瘦身，把hen多公共库dou拆散，结果维护成本飙升——后来才明白，有时候保留一点冗余，比起频繁调试geng划算呀～

Sooo… 咱们一起动手，把这些碎片化的小部件搬进各自的小窝，让主 包轻装上阵吧！加油，加油~ 🎉🎉🎉

// gulp task 示例
const { series, task } = require;
task;
task;
task;
exports.default = series(
 "analyze-deps",
 "distribute",
 "cleanup"
);

P.S. Ru果你在实际操作中遇到奇怪错误，记得先检查一下路径拼写，还有那个.vue 文件内部是否还有未处理好的相对资源引入？