vite3、vue 项目打包分包进阶-组件分包

写在前面

在上次的分包实战后，我在服务器上测试了分包后的项目效果很好，但是还不够理想，因为在我的Login页面我使用的动态组件，其中包含注册组件register、忘记密码组件renew,我们知道vite的打包机制是由各个分入口汇总到一个总文件，那么我们该怎么做呢？

回顾往期

vite打包实战,在这篇文章里我们学习了创建自定义用户片段，就是在分包，那么片段的创建规则呢就是依赖rollupOptions.output.manualChunks的自定义用户片段，通过返回规则来告诉该函数依靠什么区分片段，从而创建片段；

实战演练

在没有分包前，通过几张截图我们一起来关注下效率情况；

上面这幅图，首先为了更好的调试，停用缓存，其次我的组件区块被默认打包成了一个Login.js，加载时长4秒，页面正常运转得到10时间才行；那我们就来根据需求来配置函数，首先manualChunks的参数id是一个文件的目录，所以需要先从结构上寻找细节：

上图可以看出，我的三个组件放在了这样一个结构了，那么我们就需要传递分离规则，从此处分离，代码如下：

manualChunks(id) { //静态资源分拆打包
  if (id.includes('element-plus') || id.includes('bootstrap')) {
      return; //不打入这俩个文件相关的东西
  }
  if(id.includes('Login/')){ //利用文件目录判断
    console.log(id.toString().split('Login/')[1].split('.')[0].toString());
    return id.toString().split('Login/')[1].split('.')[0].toString();
  }
  if (id.includes('node_modules')) {
    return id.toString().split('node_modules/')[1].split('/')[0].toString();
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

我们看下log函数的结果：

这就是我们拆出来的规则，manualChunks会把这几个返回值单独形成文件，如下图

分离出来的这几个文件，就会在加载时同时刻加载，分离了单文件加载的压力，同理你复杂的区块都可以用此方法来化解，最后我们部署测验：

这里依旧是停用缓存，可以看到我们的文件在同时刻加载；我们的需求达到，并且页面功能在7秒时已经加载完毕，但问题是最终完成加载时间居然变成了29s(蓝色问号),这里我暂时没有找到问题，希望指教。

最后

📚 vite专栏

☃️ 个人简介：一个喜爱技术的人。

🌞 励志格言: 脚踏实地，虚心学习。

❗如果文章还可以，记得用你可爱的小手点赞👍关注✅，我会在第一时间回关、回访，欢迎进一步交流。