vue打包后怎么调试（vite3、vue 项目打包分包进阶-组件分包）

时间2025-08-05 10:10:51分类IT科技浏览4384

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

写在前面

在上次的分包实战后，我在服务器上测试了分包后的项目效果很好，但是还不够理想，因为在我的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(); } }

我们看下log函数的结果：

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

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

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

最后

📚 vite专栏

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

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

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

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

展开全文READ MORE