uniapp从入门到放弃——第三章：打包优化

于 2024-08-03 23:21:29 发布
阅读量236 收藏 2
点赞数 7
分类专栏： uni-app 文章标签： uni-app 微信小程序 vue node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/to_prototy/article/details/140888229
版权

文章目录

前言

最近接手一个uni-app老项目，据说该项目前后参与过的前端人员不低于20人，到我手上已经换了好几批人，甚至开发团队换了，所以代码质量也是一言难尽。尽管项目有分包但是主包大小还是达到1.8M, 因为是在上面增加新功能，咋也不敢动老代码。
最后通过网上查阅和实践，总结一下优化小程序包大小的方案。

1.分包

微信限制每个包大小不能超过2MB，建议主包只放tabBar页面，其他的页面放进分包，保证主包大小.。
在这里插入图片描述
在这里插入图片描述
分完包还要配置相关设置，因为在编译后那些静态js和组件也会放入主包中，需要加上下面设置

在manifest.json文件对应平台的配置下添加开启分包优化

//开启分包优化
"optimization" : {
   
   "sub
最低0.47元/天 解锁文章
你人还怪好的
关注
  • 7
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app从入门到放弃——第一章：uni-app项目搭建
to_prototy的博客
08-03 692
该文章主要讲解vue2环境下从零搭建一个uni-app项目
快速入门uniapp——从环境搭建到项目实践
杜永康的博客
07-04 3301
⭐⭐什么是UniApp？UniApp是一个基于Vue.js的跨平台应用开发框架，它可以帮助开发者使用一套代码构建同时运行在多个平台（包括iOS、Android、Web等）的应用程序。UniApp采用了一种基于原生渲染的方式，通过编译将应用程序转换为原生平台能够识别和运行的代码。UniApp的主要目标是提供一种高效、简单和灵活的开发方式，使开发者能够快速构建跨平台应用程序，无需针对不同平台编写独立的代码。
uniapp入门超详细教程：如何从零开始搭建项目
weixin_51609337的博客
07-19 1504
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。本次章节也是博主从零开始搭建uniapp项目，在此过程进行记录，帮助后续查询同时为读者提供讲解，如有异议，欢迎留言。uni-app官网。
从入门到实践：Uni-app跨平台开发与应用
努力是为了站在万人之中，成为别人的光
03-21 6453
Uni-app是一款基于Vue.js框架的跨平台开发工具，它能够将一份代码同时编译成多个平台的应用，包括iOS、Android、H5等。Uni-app支持使用原生组件，同时也提供了一些跨平台组件。统一封装了各平台API，能够通过JS调用原生API；使用Vue.js语法，具有Vue.js的所有特性；兼容性好，支持iOS、Android、H5等多个平台；开发效率高，代码可以一次编写多端复用。
UniApp实战分享：从零开始构建跨平台应用
Cqssss_的博客
04-23 956
Uni-app是一个基于Vue.js框架的跨平台开发解决方案，开发者可以使用一套代码编写应用，并将其轻松地发布到iOS、Android、Web（响应式）以及各种小程序平台（包括微信、支付宝、百度、头条、飞书、QQ、快手、钉钉、淘宝）以及快应用等多个平台。Uni-app的特点包括开发便捷、跨平台支持广泛、代码复用性高等，是现代移动应用开发的一种重要选择。
Uniapp入门教程：轻松理解框架特点并完成首个项目的创建
weixin_43263566的博客
10-12 6379
uniapp 项目搭建
uniApp——零基础App的快速开发记录
wuhao
04-01 1364
公司需要使用移动端App来接受云平台的数据，记录一下学习过程。
Vue3+TypeScript从入门到进阶（六）——TypeScript知识点——附沿途学习案例及项目实战代码
wuyxinu的博客
05-29 2956
一、简介 二、Vue2和Vue3区别 见后续文章 三、Vue知识点学习 见后续文章 四、TypeScript知识点 见后续文章 五、项目实战 见后续文章 六、项目打包和自动化部署 见后续文章 七、沿途学习代码地址及案例地址 1、沿途学习代码地址 https://gitee.com/wu_yuxin/vue3-learning.git 2、项目案例地址 https://gitee.com/wu_yuxin/vue3-ts-cms.git 3、项目访问地址 http://101.34.91.130:8330/l
uni-app 超详细教程（一）（从菜鸟到大佬）
热门推荐
m0_64875238的博客
11-28 4万+
uniapp 超详细教程（从菜鸟到大佬）
shopping_pro:uniapp ————————————商城模版
03-18
"shopping_pro:uniapp ————————————商城模版" 是一个基于 UniApp 开发的电商应用模板，旨在帮助开发者快速构建自己的在线购物平台。UniApp 是一个使用 Vue.js 开发的多端框架，它允许开发者编写一次代码...
uniapp入门教程.pdf
04-19
### uniapp 入门教程知识点详解 #### 一、uniapp简介 uniapp是一个基于Vue.js的跨平台应用开发框架，能够实现一次编码多端部署的功能。它支持将应用程序编译为iOS、Android、H5网页及各类主流的小程序平台（如微信...
uniapp本地打包使用支付宝支付报错：未添加payment模块，所用的模块包
04-01
为了解决这个问题，我们需要对uniapp的项目结构、配置以及第三方支付插件的引入进行深入理解。 首先，uniapp是一个基于Vue.js开发的多端框架，它允许开发者一次编写，多端运行，包括iOS、Android、H5、小程序等平台...
uni-app:从运行原理上面解决性能优化问题
02-24
Uni-App，从了解到开发，相信大家都会觉得Uni-App性能不好，其实也这是非原生的弊病。ReactNative、Flutter等，非原生框架，性能上都会或多或少的折损。但各个框架，都会做出性能提升建议，所以开发者在开发前，多...
uni-app从入门到精通-10311421.pdf
05-28
uniapp，现在是很流行的，跨端用起来还是比较快的，大家可以尝试一下，这是一篇不错的文档，下载下来看一看。希望大家都来尝试。小程序还可以，不涉及到太多的原生调用，还是不错的，
用uniapp 及socket.io做一个简单聊天app 4
最新发布
hzether的博客
08-03 155
用户登陆后进入到friends页。
【uniapp】集成第三方插件示例
xzzteach的博客
08-03 254
在 project 级别的 build.gradle 文件中添加以下内容。在 app 级别的 build.gradle 文件中添加以下内容。
【uniapp离线打包】（基于Android studio）
xzzteach的博客
07-30 1161
-- Feature-Android.xls Android平台各扩展Feature API对应的详细配置。Android平台打包发布apk应用，需要使用数字证书（.keystore文件）进行签名，用于表明开发者身份。，点击当前所需要打包操作的应用名称，进入各平台信息中，点击新增，配置AndroidApp信息。|-- HBuilder-Integrate-AS 集成uni-app的最简示例。|-- UniPlugin-Hello-AS uni原生插件开发示例。
基于springboot+vue+uniapp的美术馆预约平台小程序
老卓爱爪哇 的博客
08-03 530
岳阳市美术馆预约平台使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，其管理岳阳市美术馆预约平台信息，查看岳阳市美术馆预约平台信息，管理岳阳市美术馆预约平台。 总之，岳阳市美术馆预约平台集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。
uniapp——uniapp如何打包成安卓——自有证书
07-27
要将Uniapp打包成安卓应用并使用自有证书，可以按照以下步骤进行操作： 1. 在打包配置选项界面中选择Android作为目标平台，并选择使用自有证书。\[1\] 2. 如果你或者公司已经申请了证书，可以选择使用自有证书。如果没有，可以选择使用公测证书，用于测试目的。一般来说，广告等内容不需要添加。选择快速打包即可。\[1\] 3. 等待打包完成后，在控制台中会出现打包成功的提示。点击打开所在目录，你将会看到刚刚生成的apk文件。你可以进行自测，也可以将其发送给他人进行安装。如果要安装到手机上，可以通过将手机与电脑连接，然后右键apk文件，选择安装到手机。这样就可以在手机上安装并查看你编写的APP了。\[2\] 4. 生成自有证书的步骤如下： - 打开命令行工具，使用keytool -genkey命令生成证书。例如，使用以下命令生成证书： ``` keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore ``` 其中，testalias是后面在HBuilder上要填写的证书别名，test.keystore是后面在HBuilder上要填写的证书文件，test可以根据需要进行修改，36500表示证书的有效时间为100年，单位为天，可以根据需要进行调整。自己输入的密钥库口令是后面在HBuilder上要填写的证书私钥密码（例如123456）。\[3\] - 根据提示输入相关信息即可完成证书生成。 希望以上信息对你有所帮助！ #### 引用[.reference_title] - *1* *2* [【uniapp小程序】—— APP项目云打包（安卓）](https://blog.csdn.net/qq_49002903/article/details/126937483)[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^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [uniapp-打包安卓app(如何生成证书)](https://blog.csdn.net/qq_36738092/article/details/130644632)[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^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值