uniapp----分包

系列文章目录


uniapp-----封装接口

uniapp-----分包


目录

系列文章目录

uniapp-----封装接口

uniapp-----分包

前言

二、使用步骤

1.创建文件

​编辑

2.min.js的修改

2.1 subPackages 代码如下(示例):

 2.2 preloadRule 代码如下(示例):

 三、 注意点

总结


前言

还是同样的需求(uniapp的主包要求大小不得大于2MB),但是就算将能封装的都封装了还是会超过2MB,本文将介绍第二个优化点:分包开发


一、什么是分包开发?

有很多小伙伴一听分包开发认为就是多建几个文件夹,到时候引用就行了,说对对,但也不对,慢慢看下去就知道原因了:

首先是官网的介绍:

 可能说的不是特别清晰,大概意思就是:创建文件,并在min.js中添加路径,并添加下载事件

二、使用步骤

1.创建文件

文件目录如下(示例):

 其中fineFood、scattered、start、static是分包,pages是主包

2.min.js的修改

2.1 subPackages 代码如下(示例):

	"subPackages": [{//分包的所有的路径都在该方法中声明{"root": "static",//分包文件名称"pages": [{//配置路径"path": "index/index",//路径"style": {//导航栏样式"navigationStyle": "custom", // 隐藏系统导航栏"navigationBarTextStyle": "white"}}]}],


 2.2 preloadRule 代码如下(示例):

"preloadRule": {//下载配置"pages/index/index": {//进入到这个页面"network": "all",//不限制网络"packages": ["fineFood"]//下载名字未fineFood的分包}},

 三、 注意点

当分包和主包的路径重复(即:分包有文件的路径,主包还有)就会产生报错(大致意识为:这个地方不应该出现这个东西),这个时候只要把pages里的分包路径删除就可以了

原因:

选中这个选项后,会默认在主包添加一次路径 

总结

分包对于中、大型项目开发来说是非常有必要的,因为2MB根本做不了什么好看的项目,所以分包开发这个技术一定要会,可以不用但一定要知道怎么解决超出限制问题

喜欢的小伙伴可以点个关注后续还会继续发布关于uniapp优化的文章

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/69031.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

redis事务对比Lua脚本区别是什么

redis官方对于lua脚本的解释:Redis使用同一个Lua解释器来执行所有命令,同时,Redis保证以一种原子性的方式来执行脚本:当lua脚本在执行的时候,不会有其他脚本和命令同时执行,这种语义类似于 MULTI/EXEC。从别…

uniapp开发(由浅到深)

文章目录 1. 项目构建1.1 脚手架构建1.2 HBuilderX创建 uni-app项目步骤: 2 . 包依赖2.1 uView2.2 使用uni原生ui插件2.3 uni-modules2.4 vuex使用 3.跨平台兼容3.1 条件编译 4.API 使用4.1 正逆参数传递 5. 接口封装6. 多端打包3.1 微信小程序3.2 打包App3.2.1 自有…

棒球发展史·棒球1号位

棒球发展史 1. 棒球的起源 棒球的起源地棒球的起源地。棒球,也被称为垒球或棒球运动,起源于19世纪晚期的美国。当时在美国,体育运动已经有了较为完备的体制,也形成了多种不同的运动形式。然而,最受欢迎的体育运动主要…

【第三阶段】kotlin语言的split

const val INFO"kotlin,java,c,c#" fun main() {//list自动类型推断成listList<String>val listINFO.split(",")//直接输出list集合&#xff0c;不解构println("直接输出list的集合元素&#xff1a;$list")//类比c有解构&#xff0c;ktoli…

ReactDOM模块react-dom/client没有默认导出报错解决办法

import ReactDOM 模块“"E:/Dpandata/Shbank/rt-pro/node_modules/.pnpm/registry.npmmirror.comtypesreact-dom18.2.7/node_modules/types/react-dom/client"”没有默认导出。 解决办法 只需要在tsconfig.json里面添加配置 "esModuleInterop": true 即…

chatGPT小白快速入门培训课程-001

一、前言 本文是《chatGPT小白快速入门培训课程》的第001篇文章&#xff0c;全部内容采用chatGPT和chatGPT开源平替软件生成。完整内容大纲详见&#xff1a;《chatGPT小白快速入门课程大纲》。 本系列文章&#xff0c;参与&#xff1a; AIGC征文活动 #AIGC技术创作内容征文# …

27.Netty源码之FastThreadLocal

highlight: arduino-light FastThreadLocal FastThreadLocal 的实现与 ThreadLocal 非常类似&#xff0c;Netty 为 FastThreadLocal 量身打造了 FastThreadLocalThread 和 InternalThreadLocalMap 两个重要的类。下面我们看下这两个类是如何实现的。 FastThreadLocalThread 是对…

leetcode 力扣刷题哈希表初尝试

哈希表 刷题初尝试 哈希表基础知识242. 有效的字母异位词383. 赎金信49. 字母异位词分组438. 找到字符串中所有字母异位词 哈希表基础知识 哈希表是一种数据结构&#xff0c;也叫散列表。哈希表中存储的是键值对&#xff0c;即(key&#xff0c;value)&#xff0c;根据key直接查…

【Java】数据交换 Json 和 异步请求 Ajax

&#x1f384;欢迎来到边境矢梦的csdn博文&#xff0c;本文主要讲解Java 中 数据交换和异步请求 Json&Ajax 的相关知识&#x1f384; &#x1f308;我是边境矢梦&#xff0c;一个正在为秋招和算法竞赛做准备的学生&#x1f308; &#x1f386;喜欢的朋友可以关注一下&#…

Leetcode 21. 合并两个有序链表

题目描述 题目链接&#xff1a;https://leetcode.cn/problems/merge-two-sorted-lists/description/ 思路 两个链表都是升序链表&#xff0c;新建一个链表&#xff0c;引入伪头节点作为辅助节点&#xff0c;将各节点添加到伪节点之后&#xff0c;再用一个cur节点指向新链表的…

Mybatis 初识

目录 1. MyBatis入门 1.1 MyBatis的定义 1.2 MyBatis的核心 MyBatis的核心 JDBC 的操作回顾 1.3 MyBatis的执行流程 MyBatis基本工作原理 2. MyBatis的使用 2.1 MyBatis环境搭建 2.1.1 创建数据库和表 2.1.2 添加MyBatis框架支持 老项目添加MyBatis 新项目添加MyBatis 2.1.3 设…

分享一组天气组件

先看效果&#xff1a; CSS部分代码&#xff08;查看更多&#xff09;&#xff1a; <style>:root {--bg-color: #E9F5FA;--day-text-color: #4DB0D3;/* 多云 */--cloudy-background: #4DB0D3;--cloudy-temperature: #E6DF95;--cloudy-content: #D3EBF4;/* 晴 */--sunny-b…