首页 > 微信 > 详细

uni-app 微信小程序分包优化

时间:2021-06-08 20:09:04      阅读:14      评论:0      收藏:0      [点我收藏+]

一、分包介绍

  • subPackages 里的pages的路径是 root 下的相对路径,不是全路径。
  • 微信小程序每个分包的大小是2M,总体积一共不能超过20M。所以需要分包管理你的文件 。
  • 主包:放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;
  • 分包:是根据pages.json的配置进行划分。
  • 在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,会把对应分包自动下载下来,下载完成后再进行展示。
  • 分包下支持独立的 static 目录,用来对静态资源进行分包。
  • 针对vendor.js过大的情况可以使用运行时压缩代码
    • HBuilderX创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码
    • cli创建的项目可以在package.json中添加参数--minimize,示例:"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"

二、使用方法:

假设支持分包的 uni-app 目录结构如下:

┌─pages               
│  ├─index
│  │  └─index.vue    
│  └─login
│     └─login.vue    
├─pagesA   
│  ├─static
│  └─list
│     └─list.vue 
├─pagesB    
│  ├─static
│  └─detail
│     └─detail.vue  
├─static             
├─main.js       
├─App.vue          
├─manifest.json  
└─pages.json          

则需要在 pages.json 中填写

{
    "pages": [{
        "path": "pages/index/index",
        "style": { ...}
    }, {
        "path": "pages/login/login",
        "style": { ...}
    }],
    "subPackages": [{
        "root": "pagesA",
        "pages": [{
            "path": "list/list",
            "style": { ...}
        }]
    }, {
        "root": "pagesB",
        "pages": [{
            "path": "detail/detail",
            "style": { ...}
        }]
    }],
    "preloadRule": {
        "pagesA/list/list": {
            "network": "all",
            "packages": ["__APP__"]
        },
        "pagesB/detail/detail": {
            "network": "all",
            "packages": ["pagesA"]
        }
    }
}

 

uni-app 微信小程序分包优化

原文:https://www.cnblogs.com/zjianfei/p/14863762.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!