5***@qq.com
5***@qq.com
  • 发布:2019-06-11 10:41
  • 更新:2024-01-09 10:38
  • 阅读:12014

【报Bug】uniapp微信小程序分包页面引入分包中的js,会打包到全局主包中的vendor.js中导致文件过大

分类:uni-app

详细问题描述

分包页面引入分包中的js,会打包到全局主包中的vendor.js中导致文件过大

[内容]

重现步骤

[步骤]

[结果]

[期望]

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]

[IDE版本号]

[windows版本号]

[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序?]

[运行端版本号]

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]

[编译模式是老模板模式还是新的自定义组件模式?]

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]

2019-06-11 10:41 负责人:无 分享
已邀请:
le_

le_

所以有解决方案了吗?
有办法把 vendor.js 拆分成多个文件吗,正式发布压缩完也有500多k

happyboy183

happyboy183 - 前端爱好者

问题已解决

解决方案:直接在manifest.json,点击源码视图:查找:mp-weixin:添加:"optimization":{ "subPackages":true }

  • 270315475

    这个有点用

    2021-07-08 17:56

  • 6***@qq.com

    用了这个打出来的vendor.js还是1M多

    2021-09-08 10:17

  • myfengstyle

    试过没啥用

    2022-02-12 13:05

  • happyboy183

    回复 myfengstyle: 可以尝试将组件分离,如果只有子包用到的组件,那么就把这个组件放到子包中。同理,图片资源也是这样。其次,减少scss等预编译命令的使用,可以有效减少代码包体积。

    2022-02-15 11:01

  • 2***@qq.com

    有用,已解决,感谢

    2023-03-27 10:21

  • 1***@qq.com

    已解决

    2023-09-14 10:06

3***@qq.com

3***@qq.com

你的问题解决了吗

1***@qq.com

1***@qq.com - 从vue到uniapp

我也遇到同样的问题

1***@qq.com

1***@qq.com

请问解决了,大神

2***@qq.com

2***@qq.com - 前端

我也有一样的问题,vendor太大了

hedele

hedele

mark

4***@qq.com

4***@qq.com

有解决方案了吗?

require('./common/runtime.js')
require('./common/vendor.js')
require('./common/main.js')` 这个写死了,也没办法自己改打包规则呀

春雷Le

春雷Le - 私信,接各种特效

压缩下几百k的js文件 用到打印的encoding-indexes.js也可以删点

1***@qq.com

1***@qq.com - 从vue到uniapp

1.我的项目里用到了echart,后面就到官网去配置,小了一些,如果用到vant,也可以按需引入

  1. 如果运行后,包太大无法真机调试,可是试着用“发行”,会至少小一半
  2. 图片的话,就丢到服务器,不放在本地
    以上是个人的方法,希望对大家有帮助
  • 墨之斗

    我也是引入了echart,分包后,点击发行仍然不能正常显示,请问你是怎么做的?能具体说明以下吗?

    2021-01-25 16:19

DCloud_uniCloud_WYQ

DCloud_uniCloud_WYQ

这块应该做了处理才对,你把你的项目发上来我看下

  • GraceLeeau

    请问vendor的大小跟哪些因素有关?能介绍下它的组成?? 目前有个小项目,页面没几个,也配置了分包,主包就4个页面,也没有很多公用组件,也没用到特别的依赖,打包QQ小程序后,vendor文件却有2.5M,找了文档、社区、issue、google很多地方,也没有找到原因,和测试有效的方法,还麻烦指示一下

    2020-03-11 14:40

  • GraceLeeau

    另外,用分析工具分析了文件大小,vendor.js gzip 下也有接近800k,请问小程序端如何设置打包成gzip压缩的

    2020-03-11 14:42

  • DCloud_uniCloud_WYQ

    回复 GraceLeeau: 小程序端是没有gzip这一说的,一般是三方依赖,或者被转成base64的小图标、字体。对分包进行优化可以参考这里,https://uniapp.dcloud.io/collocation/pages?id=subpackages

    2020-03-11 17:57

  • GraceLeeau

    回复 DCloud_uniCloud_WYQ: 感谢回复,分包优化已经做了,minimize也没什么作用,文档中提到的vendor体积处理的方式都做了。后面配置了CompressionWebpackPlugin压缩成gzip, 确实包体积小了很多

    2020-03-12 12:03

  • 1***@qq.com

    回复 GraceLeeau:请问解决了吗

    2020-05-25 13:55

清茶涩

清茶涩

大兄弟,解决了吗,我也发现了这个问题

2***@qq.com

2***@qq.com - 李海

把 js文件 里面内容 数据 修修改改 写在 一个vue模块页面里就行了 成功了 没进主包(肯定的)

  • 9***@qq.com

    怎么弄,有例子吗?

    2021-01-28 17:59

6***@qq.com

6***@qq.com

mpvue微信小程序分包中的公共库打包方案
https://juejin.cn/post/6962014555983577102

uni的方案应该和mpvue差不多 最近没做uni-app的项目了, 自己改改吧

奥山

奥山

分包的时候, root里面不能写成 "root": "messagePack/",
要写成下面这个样子

{  
      "root": "messagePack",  
      "pages": [  
        {  
          "path": "pages/messageCenter/index",  
          "style": {  
            "navigationBarTitleText": "消息中心",  
            "navigationStyle": "custom",  
            "pageOrientation": "portrait",  
            "navigationBarBackgroundColor": "#000000",  
            "navigationBarTextStyle": "white"  
          }  
        }  
      ]  
    },
LXG1996

LXG1996

分包里的 js 文件,比如 echarts.min.js 等等,

即使只在 分包里 引用也会被打进主包

我看他编译的时候是把你的 .vue 文件编译为 wxml wxss js json文件,js这种的会直接 vendor

解决办法是,分别也支持 static 文件夹,而且每个分包可以有自己的 static 文件夹并且和主包独立,

static文件夹不会被打进主包而是作为分包的一部分资源存在

所以说解决办法就是把分包里 大的 js lib或者 库 什么的放进该分包的 static 文件夹下,然后引用,不会被打进 vendor

  • 我是船长

    js放到static里,依然会到vendor,同时分包内的static也会保留一份,反向优化了这是

    2023-12-05 15:26

3***@qq.com

3***@qq.com - 123131

vendor.js 过大的原因是因为自动生成了很多无用的与国际化相关的代码,大概占用了200多kb,强烈建议官网去掉这些无用的代码。

要回复问题请先登录注册