vite3、vue 项目打包分包进阶-组件分包-Toy模板网

这篇具有很好参考价值的文章主要介绍了vite3、vue 项目打包分包进阶-组件分包。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

写在前面

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

回顾往期

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

实战演练

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

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

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

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

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

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();
  }
}