400 028 6601

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

小程序怎么使用分包加载-创新互联

这篇文章主要介绍小程序怎么使用分包加载,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

专注于为中小企业提供网站建设、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业法库免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了成百上千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

"离线包"机制

微信小程序采用的是类似离线包加载方案,以转转小程序为例,当用户第一次打开时会先下载好所有代码,然后再加载页面;当用户再次进入转转小程序时,会直接使用已下载的代码,省去了代码下载的过程,打开速度更快。

看似很美好的设计,但有两个问题:

问题看似不大,但对转转有很大影响,例如进行微信广告投放时,用户从点击广告到加载第一个页面之间的流失率竟能到达40%,这显然是FE无法接受的性能,而小程序分包加载机制能够在一定程度上解决上述问题。

分包加载

小程序的分包加载机制实际上是离线包和M页的一种结合机制,即你可以把代码划分成主包+N个分包,官方定义:

在小程序启动时,默认会下载主包并启动主包内页面,如果用户需要打开分包内某个页面,客户端会把对应分包下载下来,下载完成后再进行展示。

总结如下:

特性

关于主包

关于分包

这样的好处是进入主包页面时,需要下载的代码量小了很多,白屏时间更短,体验更佳。

小程序开发的过程中,小程序的体积会随着版本的迭代变的越来越大,这时候我们就希望能够将小程序分成多个包从服务器下载,这样既可以加快首屏的渲染也便于后续按需加载的实现。小程序在微信客户端 6.6.0,基础库 1.7.3 及以上版本开始支持 分包功能。

在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据开发者的配置进行划分。
在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。

小程序怎么使用分包加载

配置方法

小程序怎么使用分包加载

配置例子

{
 "pages": ["pages/index", "pages/shopcart"],
 "subpackages": [
  {
   "root": "packageA",
   "pages": ["pages/mine", "pages/order"]
  },
  {
   "root": "packageB",
   "name": "pack2",
   "pages": ["pages/detail", "pages/pay"]
  }
 ]
}
├── app.js
├── app.json
├── app.wxss
├── packageA
│  └── pages
│    ├── mine
│    └── order
├── packageB
│  └── pages
│    ├── pay
│    └── detail
├── pages
│  ├── index
│  └── shopcart
└── utils

打包原则

引用原则

以上是“小程序怎么使用分包加载”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页题目:小程序怎么使用分包加载-创新互联
URL地址:http://mbwzsj.com/article/shpdp.html

其他资讯

让你的专属顾问为你服务