uni-app vue3.x 版本下已做分包但小程序打包时分包文件仍被打包进主包vendor.js

发布于 1周前 作者 itying888 来自 Uni-App

uni-app vue3.x 版本下已做分包但小程序打包时分包文件仍被打包进主包vendor.js

操作步骤：

  • 发行 - 选择发布到小程序

预期结果：

  • 希望 分包出去的文件不要打包进主包

实际结果：

  • 实际上打包进了主包导致文件过大

bug描述：

  • vue3.x 下 + vite 打包，把分包里面的js 也打进了vendor 里面，导致主包过大

图片

Image 1 Image 2 Image 3 Image 4

项目信息

信息类别 详情
产品分类 uniapp/小程序/微信
PC开发环境 Mac
操作系统版本 12.1
HBuilderX类型 正式
HBuilderX版本 3.99
第三方工具版本 1.06.2402030
基础库版本 3.3.5
项目创建方式 HBuilderX

Harmonyos Next教程
23 回复

确定有成功分包吗？看上面的截图好像你的分包在 /pages/xxx 目录； 根目录的这个 pages目录是主包放页面的地方，可能没有成功分包，检查一下分包情况吧
在小程序开发者工具右上角-详情-基本信息，看看分包列表，是否符合预期


你看下，我这块的截图，确实已经分出去了的

我看确实是在分包里面的

uniapp 在进行微信小程序打包时，会将分包页面引入的 js 打包到主包的 vendor.js 中。 如果担心主包文件过大，可以采用压缩和拆分，可以单独采用或者同时进行 详见：详情

链接打不开

回复 julytian: 已更新回复

加了这些配置，vue3+vite的uniapp-cli项目已经分包了，但是子包的js还是会打包到主包的vendor.js中，子包没有自己的vendor.js

不行啊，还有没有其它方案

社区维护人员，赶紧如何解决这个问题，我是用vue3的ts写，也出现跟博主一样问题，分包了，打包小程序还是会发现分包的文件被打包进了主包的vendor.js。。。。博主解决了吗？？？

解决了？

解决了吗？为什么，会将分包的文件打包到主包的vendor.js文件里面。而且还是新建的分包，没有任何代码。新建的分包路径也正常。mainifest.json该配置都配置了啊

我也遇到了这个问题，你们都解决了吗

解决条毛，都是删除一些文件，uni-app是不是要完蛋了，问题那么久不回复

我也遇到了这个问题，前辈们都解决了吗

我最后还是删文件，删没用的依赖，减少的

同问题，就没有解决办法吗

可以看看这几篇文章 https://juejin.cn/post/7251833062618513466 https://juejin.cn/post/7205092873326723109 https://ask.dcloud.net.cn/article/41174 https://ext.dcloud.net.cn/plugin?id=18199

目前node_modules的包默认回 打包到vender.js主包中， 如果需要将node_modules内的包也引入到分包中，则需要将node_modules里面的包 移动到项目目录中，然后再在分包中引用。

具体怎么移动，

使用分包了，主包vendor还是大1.4M, vue3 vite方式，有没有解决办法？

这个问题竟然没一个社区的人回复，6

大概率是使用了插件，但是被打包进了主包中，把插件移动到子包中就好了 可以参考这个文章：https://blog.csdn.net/qq_35378569/article/details/144538125

在uni-app中使用Vue 3.x版本进行开发时，如果你已经配置了分包，但发现分包文件仍然被打包进了主包vendor.js中，这通常是因为配置或者代码组织方式不当。下面我将提供一个基本的分包配置示例和一些代码片段，帮助你确保分包正确配置。

分包配置示例

首先，确保你的pages.json文件中正确配置了分包。例如：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "subpkg/pages/list/list",
      "style": {
        "navigationBarTitleText": "列表页"
      }
    }
  ],
  "subPackages": [
    {
      "root": "subpkg/",
      "pages": [
        "pages/list/list"
      ]
    }
  ]
}

在这个配置中，subpkg/pages/list/list页面被配置为了分包的一部分。

确保资源正确引用

分包的一个重要原则是，分包的页面或组件只能引用同分包内的资源。如果你在分包的页面或组件中引用了主包或其他分包的资源（如图片、JS文件等），这些资源可能会被错误地打包进主包。

动态加载分包

如果你是在运行时动态加载分包，确保使用正确的API。例如，使用uni.redirectTo跳转到分包页面：

uni.redirectTo({
  url: '/subpkg/pages/list/list'
});

检查Webpack配置（如有必要）

虽然uni-app封装了大部分构建逻辑，但在某些复杂场景下，你可能需要查看或修改Webpack配置。通常，这涉及到vue.config.js或webpack.chain.js文件（如果你使用了自定义构建）。

确保没有配置错误导致分包资源被错误地打包进主包。例如，检查是否有全局的import或require语句错误地引入了分包资源。

结论

如果以上步骤都正确无误，但问题仍然存在，可能需要考虑以下因素：

  • 确保uni-app和相关依赖是最新版本。
  • 查看uni-app社区或GitHub Issues是否有类似问题的报告和解决方案。
  • 考虑是否有第三方插件或库影响了打包行为。

通常，正确配置分包并在代码中遵循分包原则，应该可以避免资源被错误打包进主包的问题。如果问题依旧，建议详细检查项目配置和代码实现。

回到顶部