基于uni-app的微信小程序之分包

标签:基于,程序,之分 发布时间:2021年01月23日 点击23
最近工作在接触uni-app,用它来开发微信小程序,也是第一次接触,找了很久,还有大佬用本身写的函数做的,俺觉得我不会也不配,刚悦目到下面评论是官方也支撑了,所以就用官方的了,这里记录一下

1. 关于分包

? 彷佛是规定小程序不能超过2M,一旦超过就必要分包,由于是公司项目,一定超过,所以就做个演示,权当记录吧

1.0 这是 官方文档

1.1 细致事项

  1. subPackages 里的pages的路径是 root 下的相对路径,不是全路径。
  2. 微信小程序每个分包的大小是2M西安人事考试报名,总体积一共不能超过16M。
  3. 百度小程序每个分包的大小是2M浙江人事考试,总体积一共不能超过8M。
  4. 付出宝小程序每个分包的大小是2M,总体积一共不能超过4M。
  5. QQ小程序每个分包的大小是2M,总体积一共不能超过24M。
  6. 分包下支撑自力的 static 目录,用来对静态资源进行分包。
  7. uni-app内支撑对微信小程序、QQ小程序、百度小程序分包优化,即将静态资源或者js文件放入分包内不占用主包大小。详情请参考:关于分包优化的说明
  8. 针对vendor.js过大的情况可以使用运行时压缩代码
    • HBuilderX创建的项目勾选运行-->运行到小程序模仿器-->运行时是否压缩代码
    • cli创建的项目可以在pacakge.json中添加参数--minimize,示例:"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"

2.使用方法

2.1 首先你得有个uniapp的微信小程序项目

? 这里假设你有了,原始项目结构

图片

? 用微信开发工具打开的样子,没有分包之前

2.2 在pages同级创建分包

图片

2.3 pages.json配置

? 图片

?

2.4 然后呢,官网支撑了 分包优化

  • 在对应平台的配置下添加"optimization":{"subPackages":true}开启分包优化
  • 目前只支撑mp-weixinmp-qqmp-baidu的分包优化
  • 分包优化详细逻辑:
    • 静态文件:分包下支撑 static 等静态资源拷贝,即分包目录内放置的静态资源不会被打包到主包中,也不可在主包中使用
    • js文件:当某个 js 仅被一个分包引用时,该 js 会被打包到该分包内,否则仍打到主包(即被主包引用,或被超过 1 个分包引用)
    • 自定义组件:若某个自定义组件仅被一个分包引用时SEO优化,且未放入到分包内,编译时会输出提醒信息

我的理解呢就是,既然你分包了功能模块,那响应的静态资源你得分吧,用图片的时候直接是分包下的路径,这才是个完备的分包.

这里我以微信小程序为例,

图片

图片

2.5 怎么跳转呢?

在必要点击跳转的地方就好啦

        uni.navigateTo({
          url: '/myPackageA/pages/piece/piece'
        })

2.6 然后重启微信开发工具运行

图片

可以看到已经分包成功

最后上个演示GIF 叭

图片

手机网站建设