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

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

时间2025-09-16 09:25:41分类IT科技浏览6111
导读: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
linux查看cpu当前主频(cpu主频怎么看? deepin20查看CPU主频的技巧) 罗山县百度百科("罗山县")