文章目录

• 写在前面
• 回顾往期
• 实战演练
• 最后

写在前面

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

回顾往期

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

实战演练

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6pyYZklW-1667093948986)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/26a1e620b5fd449ca53058f8a83c4507~tplv-k3u1fbpfcp-watermark.image?)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5BpsJgPv-1667093948988)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/481417b4d34f41479449886f1d914cbc~tplv-k3u1fbpfcp-watermark.image?)]

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

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

我们看下log函数的结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O0P8c5bQ-1667093948989)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/67139a2051d64deb8fb2c031f9969c9d~tplv-k3u1fbpfcp-watermark.image?)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xRBQciU5-1667093948989)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a680eac66601401fba762a8428e17bb2~tplv-k3u1fbpfcp-watermark.image?)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X8JwgMY1-1667093948990)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cd822caff8e8428fbeb1a6bc22fb1bf4~tplv-k3u1fbpfcp-watermark.image?)]

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

最后

📚 vite专栏

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

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

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