首页IT科技小程序怎么分包加载(uniapp-微信小程序 分包–详解)

小程序怎么分包加载(uniapp-微信小程序 分包–详解)

时间2025-07-30 00:07:16分类IT科技浏览5292
导读:uniapp-微信小程序 分包–详解 实际环境(用business举例,可以创建很多个分包)...

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里面的很多页面你们是不用初次进入直接使用的                       ,所以分出去                       。看图

原本我的状态是:

上面的下面那张图片是接着上面的               ,懒得放回去了        ,意思就是pages下面的business文件夹下有很多vue页面                       ,都是页面跳转的               ,初次进入index首页时并不会用到这些文件,所以把它丢出去        。此时我们在pages同级下创建一个business文件夹       。

我们把除了tarbar需要的那几个界面的其他界面全都放这个文件夹里面来                       ,同时我们可以创建components文件夹和static文件夹                      ,存放这个分包business文件夹中所用到的components组件和静态资源,但要注意                ,我们这篇文章是已经做好项目了                      ,所以当你拉出组件和图片的时候       ,要看一下tarbar的那几个页面有没有用到这些组件和static                ,如果用到了                       ,你要放到主包里面去的

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

然后就到了配置环节        ,我们原本所有的界面都在pages.json文件里面写好了                       ,现在已business为例               ,原本path应该都是pages/business/… 现在除了tarbar那个界面        ,其他的全部复制一份然后删除(指business下的)在pages.json的pages同级下创建一个 然后把你刚复制的那些粘贴到subPackages的pages里面                       ,要改名字

举个例子:原本pages/business/caichan,放过来之后变成:caichan,为什么?这是路径               ,自己想(/business/caichan)

照着这个写下去就行,嫌麻烦                       ,自己循环去                       。到这里pages.json写完了                。

然后跟我走:找这个

在源码视图里面有个(项目是uniapp做微信小程序                      ,转其他估计也差不多,但不保证完全一致                ,自己去翻对应文档)mp-weixin

在他里面写属性:

(非常贴心                      ,直接复制)

“optimization                ” : {

“subPackages                       ” : true

},//开启分包

“lazyCodeLoading       ” : “requiredComponents        ” //按需注入

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

最后                      ,是否成功分包,可以看得到                ,编译后弹出的微信开发者工具中有一个代码质量 选择代码质量                      ,让他扫描

一下       ,下面有一个

点击查看

就可以看到整个项目的文件了

看看我的:

划重点                ,右边那个分包

                      ,以这个为标准       ,有就对了                      。

ok        ,如果没看懂                       ,可以评论问我或私信               ,有空会回复的        ,如果觉得讲的不好                       ,放上官网链接               ,自己看吧

如果看不懂,还是看我的                       ,挺详细的                      ,照着做,不会错                ,点这个就是官网链接

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
express框架过时了吗(express项目的创建) 桐庐SEO关键字优化(桐庐seo提升的贴士)