uniapp-微信小程序 分包--详解

这篇具有很好参考价值的文章主要介绍了uniapp-微信小程序 分包--详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp-微信小程序 分包–详解

实际环境(用business举例,可以创建很多个分包)

先说好,如果代码模块多,就一个一个模块搞(照着做不会错)

直入主题,我代码写完了,一真机运行,g,发现超过2m(微信小程序不能超过2m),找办法,发现设置里面有个最大运行4M,打开后可以真机调试了,结果上传代码,g,必须小于2M。找办法

1、将静态资源放到服务器去,拿网络图片不占用项目资源(可行)但静态资源只能200k,其中tarbar的图标icon只能是png、jpg等,结果拿设计图太大了,改,改完之后,整个主包的静态资源也就是static文件夹,小于200k了,但是内存还是大了,可能是内置了其他的ui库的原因,没关系第二个办法。

2、使用分包,在这之前没用过,找了好几篇文章,又没说清楚。跟我走

    1°分包的概念,把你主页也就是小程序tarbar之外的页面、资源、组件,放出去,别再主包里面混资源,等待用的时候再拿过来。

    2°主包和分包区分:主包(pages、static、components)可能还有,其他的不重要了,除去他们其他基本都算分包(意思是你都可以用分包装起来)

    3°来个实际场景,跟我走

首先、最开始你们没想过分包的话,你所有的模块都应该是页面放在pages,静态资源放在static、组件放在components里面,此时pages里面的很多页面你们是不用初次进入直接使用的,所以分出去。看图
原本我的状态是:
uniapp-微信小程序 分包--详解
uniapp-微信小程序 分包--详解
上面的下面那张图片是接着上面的,懒得放回去了,意思就是pages下面的business文件夹下有很多vue页面,都是页面跳转的,初次进入index首页时并不会用到这些文件,所以把它丢出去。此时我们在pages同级下创建一个business文件夹。
uniapp-微信小程序 分包--详解
我们把除了tarbar需要的那几个界面的其他界面全都放这个文件夹里面来,同时我们可以创建components文件夹和static文件夹,存放这个分包business文件夹中所用到的components组件和静态资源,但要注意,我们这篇文章是已经做好项目了,所以当你拉出组件和图片的时候,要看一下tarbar的那几个页面有没有用到这些组件和static,如果用到了,你要放到主包里面去的

(其实最简单的就是把全部复制出来之后,自己去主包的static和components里面删除tarbar页面不用的那些资源就OK了)

然后就到了配置环节,我们原本所有的界面都在pages.json文件里面写好了,现在已business为例,原本path应该都是pages/business/… 现在除了tarbar那个界面,其他的全部复制一份然后删除(指business下的)在pages.json的pages同级下创建一个
uniapp-微信小程序 分包--详解
然后把你刚复制的那些粘贴到subPackages的pages里面,要改名字
举个例子:原本pages/business/caichan,放过来之后变成:caichan,为什么?这是路径,自己想(/business/caichan)
uniapp-微信小程序 分包--详解
照着这个写下去就行,嫌麻烦,自己循环去。到这里pages.json写完了。
然后跟我走:找这个
uniapp-微信小程序 分包--详解
在源码视图里面有个(项目是uniapp做微信小程序,转其他估计也差不多,但不保证完全一致,自己去翻对应文档)mp-weixinuniapp-微信小程序 分包--详解
在他里面写属性:
uniapp-微信小程序 分包--详解

(非常贴心,直接复制)

“optimization” : {
“subPackages” : true
},//开启分包
“lazyCodeLoading” : “requiredComponents” //按需注入

写完这个来到最后一步了——改路径
之前那些组件引入的时候不都是…/…/components/…吗还有/static/这些,你现在business提到了最外面,路径肯定改了,至于怎么改(用uniapp搜索然后替换是最快的,前提是你之前的代码都遵循了比较好的规范),自己想办法,反正你没改过去,代码会报错(跟着报错改),如果发现编译后页面没了,路径也对了,那多半是还没缓过来,等等就好,重新编译。

最后,是否成功分包,可以看得到,编译后弹出的微信开发者工具中有一个代码质量
uniapp-微信小程序 分包--详解
选择代码质量,让他扫描一下,下面有一个
uniapp-微信小程序 分包--详解
点击查看就可以看到整个项目的文件了
看看我的:
uniapp-微信小程序 分包--详解
划重点,右边那个分包,以这个为标准,有就对了。
ok,如果没看懂,可以评论问我或私信,有空会回复的,如果觉得讲的不好,放上官网链接,自己看吧

如果看不懂,还是看我的,挺详细的,照着做,不会错,点这个就是官网链接文章来源地址https://www.toymoban.com/news/detail-422236.html

到了这里,关于uniapp-微信小程序 分包--详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 微信小程序 分包打包流程出现的问题

    uniapp 微信小程序  URL:小程序性能优化指南 | 微信开放社区   主包只能2M,太小啦 举个例子 比如公司就是一个项目(小于20M),新来的同事就是一个文件吧,随着公司的人越来越多(项目也就是主包大于2M),就需要划分部门,每个部门就可以理解为一个分包。  URL:使用分包

    2024年02月09日
    浏览(81)
  • uniapp微信小程序超过2M,错误码:80051,分包处理,超简单!!!

    错误提示:message:Error: 上传失败:网络请求错误 系统错误,错误码:80051,source size 2293KB exceed max limit 2MB 第一步:首先创建一个与pages同级的目录pagesA                pages 用于存放登录页面及tabBar的那几个页面                pagesA  用于存放其他页面      

    2024年02月04日
    浏览(46)
  • 微信小程序中主包和分包过大,详解分包问题

    哈喽,大家好呀!小韵携原创博文给大家请安啦! 前言 :开发微信小程序时,若项目比较大,必定要分包,当项目过于大时,则需要细致、谨慎地对项目进行分包优化和精简,这是一个不可避免地问题,网上的大多数分包优化都是针对于小项目的普通官方分包优化,并未将

    2024年02月08日
    浏览(55)
  • uniapp编译微信小程序主包过大无法上传进行分包优化步骤

    uniapp编译微信小程序主包过大无法上传进行分包优化步骤: 首先是在uniapp项目中的 manifest.json 文件中找到 源码视图 ,进去之后在微信小程序相关 mp-weixin 之下进行开启分包优化的相关配置: 开始新建项目目录,新建一个跟pages同等级的文件夹,然后把想要分包的文件 先复制

    2024年02月11日
    浏览(56)
  • 使用uniapp在打包微信小程序时主包和vendor.js过大(uniCloud的插件分包)

    正常的的微信小程序在编译后,主包应保持在2MB左右(限制最大2MB),其余的文件通过分包来进行加载  但是有的情况下,微信小程序的主包能达到3MB,vendor.js会达到1.5MB 当你发现的你的微信vendor.js只有1个文件夹,且这个文件非常大时,首先需要检查 manifest.json 在这个文件夹

    2024年02月02日
    浏览(72)
  • uniapp开发微信小程序分包处理实录

            uniapp开发微信小程序上传代码时可能会遇到项目过大问题,今天就结合自己的实际操作简单记录下如何处理项目代码超出限制问题。         常用的操作就是将项目中的图片访问由本地访问修改为网络访问,微信开发者工具上传代码时勾选相关的压缩文件选项

    2024年02月03日
    浏览(50)
  • uniapp开发微信小程序,主包(分包超过限制)

    嘀嘀嘀  ~  和大家分享一下  最近的uniapp开发微信小程序  在真机调试 或者在上传的时候 提示主包或者分包 大小超过限制   首先和大家说一下  微信小程序  主包限制不能超过2M     分包一共不能超过8M(好像是记不太清了) 然后具体解决优化步骤如下, 1.   将主包进

    2024年02月15日
    浏览(55)
  • uniapp开发小程序-分包(微信错误码:800051)

    在使用uniapp开发小程序时,上传的时候因为文件过大,显示上传失败。 ①尝试过把本地使用的图片压缩到最小; ②把图片转换为网络的,在小程序里只是引用; ③删除无用的代码; 发现这都不是成熟的方法,不能更大程度上的解决问题。所以想到了 分包 。 解决方法:分包

    2024年02月13日
    浏览(45)
  • 微信小程序独立分包与分包预下载

    官网链接 独立分包配置方法 独立分包使用限制 独立分包中不能依赖主包和其他分包中的内容,包括 js 文件、模板、wxss、自定义组件等; App 只能在主包内定义,独立分包中不能定义 App,会造成无法预期的行为 独立分包中暂时不支持使用插件 分包预加载 开发者可以通过在

    2024年02月20日
    浏览(45)
  • 微信小程序(十四)分包和分包预加载

    注释很详细,直接上代码 上一篇 新增内容: 1.分包的配置 2.分包预加载的写法 先说说为什么需要分包: 小程序追求小而快,主包的大小控制是 小程序上线的硬性要求 ,分包有利于小程序 优化加载速度 分包的注意事项: 单个分包大小不能超过2mb 分包不意味着可以无限增加

    2024年01月25日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包