uniapp和小程序如何分包,详细步骤手把手(图解)

  • 单个分包/主包大小不能超过 2M

对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。

这里直接点击去看官方的分包教程容易理解

二、uniapp分包小程序


App默认为整包。兼容小程序的分包配置。其目的不用于下载提速,而用于首页是vue时的启动提速。

这是我分包小程序之后的目录结构

  • components:公共组件(供主包引用)

  • page_后跟拼音的都是分包

  • 分包里的components是单个分包自己的组件目录,分包vue页面的引用只能是在自己page_zhaoshang分包目录下才可以引用

  • pages是主包,里面都是启动页面/TabBar 页面

  • static里放的是公共静态资源,图片类

分包步骤:

=====

1.配置manifest.json


“mp-weixin”: {

“optimization”:{“subPackages”:true}

}

优化分包:

在对应平台的配置(manifest.json)下添加"optimization":{"subPackages":true}开启分包优化

目前只支持mp-weixinmp-qqmp-baidu的分包优化

  • 静态文件:分包下支持 static 等静态资源拷贝,即分包目录内放置的静态资源不会被打包到主包中,也不可在主包中使用

  • js文件:当某个 js 仅被一个分包引用时,该 js 会被打包到该分包内,否则仍打到主包(即被主包引用,或被超过 1 个分包引用)

  • 自定义组件:若某个自定义组件仅被一个分包引用时,且未放入到分包内,编译时会输出提示信息

2.配置pages.json


在pages.json中新建数组"subPackages",数组中包含两个参数:1.root:为子包的根目录,2.pages:子包由哪些页面组成,参数同pages;

注意:主包和分包是不能再同一目录下,在构建uniapp项目时,可以考虑一下目录结构,以便后期进行分包;

3.分包预载配置(preloadRule)


专业技能

一般来说,面试官会根据你的简历内容去提问,但是技术基础还有需要自己去准备分类,形成自己的知识体系的。简单列一下我自己遇到的一些题

  • HTML+CSS

  • JavaScript

  • 前端框架

  • 前端性能优化

  • 前端监控

  • 模块化+项目构建

  • 代码管理

  • 信息安全

  • 网络协议

  • 浏览器

  • 算法与数据结构

  • 团队管理

最近得空把之前遇到的面试题做了一个整理,包括我本人自己去面试遇到的,还有其他人员去面试遇到的,还有网上刷到的,我都统一的整理了一下,希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限,仅展示部分内容

  • 22
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
分包uni-app中的具体步骤如下: 1. 在pages.json文件中配置分包规则。在"subPackages"字段中添加一个对象,其中包含"root"和"pages"两个字段。"root"表示子包的根目录,"pages"表示子包中的页面配置。每个页面配置包括"path"和"style"两个字段,分别表示页面路径和页面样式配置。 2. 如果想进一步提升分包的启动速度,可以进行分包预加载处理。在pages.json文件中的"preloadRule"字段中配置预加载规则。可以指定在进入某个页面后预下载某个分包。预加载规则包括"network"和"packages"两个字段,分别表示预下载的网络条件和预下载的分包路径。 3. 在manifest.json文件中配置分包设置。需要设置在app端开启分包。具体配置可以参考uni-app官网的文档。 总结起来,uni-app分包的具体步骤包括配置pages.json文件中的分包规则,配置分包预加载规则,以及在manifest.json文件中开启分包设置。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* [uniapp分包小程序分包处理,详解(图解),手把手从0开始](https://blog.csdn.net/weixin_50587417/article/details/126933562)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [uniapp小程序如何分包详细步骤手把手图解)](https://blog.csdn.net/Bejpse/article/details/123367670)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值