• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、优化方案

1、开启--minimize压缩模式(针对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"

2、让分包的依赖就打包在分包里,别打包到主包里,其实只要添加一个配置及可以了。

打开manifest.json,在“mp-weixin”里添加代码,添加后,记得一定要重新运行项目,才看到效果,单单靠热更新是不行的!!!

"optimization":{ 
        "subPackages":true
   }

 3、分包设置

一、分包注意事项

  • 微信小程序每个分包的大小是2M,总体积一共不能超过20M。所以需要分包管理文件 。
  • 主包:放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;
  • 分包:是根据pages.json的配置进行划分。
  • 在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,会把对应分包自动下载下来,下载完成后再进行展示。
  • 静态文件:分包下支持 static 等静态资源拷贝,即分包目录内放置的静态资源不会被打包到主包中,也不可在主包中使用。
  • js文件:当某个 js 仅被一个分包引用时,该 js 会被打包到该分包内,否则仍打到主包(即被主包引用,或被超过 1 个分包引用)
  • 自定义组件:若某个自定义组件仅被一个分包引用时,且未放入到分包内,编译时会输出提示信息

二、分包使用方法:

假设支持分包的 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.navigateTo({
      url: '/myPackageA/pages/piece/piece'
    })

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序切换到tabBar页面不刷新问题发布时间:2022-07-18
下一篇:
微信小程序初体验遇到的坑发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap