uni-app (小程序)

最近更新时间:2024-08-27 15:30:22

我的收藏
警告:
影响包体积的通常原因是项目中的静态资源过大,其他分包中的第三方依赖被打入主包中,具体可以参见 通用解决方案
特别注意:单独集成 TUIKit 和 TUIKit 与 TUICallKit 的融合场景,大约占用主包体积约800KB,需要预留对应的主包体积。

如何查看小程序包体积占比

在微信开发者工具中,顶部操作栏右侧 > 详情 > 代码依赖分析,可以查看编译后的包的情况与各文件大小。




包体积占比参照

注意:
这里是统一使用分包集成方式并经过下面的优化手段后的体积占用,可以通过对比下表,快速分析项目中的包体积占用,并预留相对应的主包体积
场景
环境
需预留主包体积
分包体积
截图
说明
单独集成 TUICallKit
Vue2
不占用主包体积
1.48 MB



主包仅包含 uniapp 相关打包产物
Vue3
不占用主包体积
1.37 MB



主包仅包含 uniapp 相关打包产物
单独集成 TUIKit
Vue2
约 800 KB
1.48 MB



主包中包含 Chat SDK 和 TUICore 约800KB
Vue3
约 800 KB
764 KB



主包中包含 Chat SDK 和 TUICore 约800KB
TUIKit 与 TUICallKit 的融合场景
Vue2
约 800 KB
2.07 MB



主包中包含 Chat SDK 和 TUICore 约800KB
Vue3
约 800 KB
1.22 MB





主包中包含 Chat SDK 和 TUICore 约800KB
说明:
在单独集成 TUIKit和融合场景下,Chat SDK 和 TUICore 位于主包中,大约占用主包体积约 800 KB,需要预留对应的主包体积。

IDE 配置优化方案

Hbuilder 运行时相关配置

顶部操作栏 > 运行 > 运行到小程序模拟器 > 运行时是否压缩代码(勾选)
说明:
该步骤能有效减少第三方插件或组件库的代码体积,但也仅限代码,静态资源不会被压缩。



下图给出了是否勾选运行时是否压缩代码的效果对比(851KB -> 454KB,降低 50%
不进行压缩:



进行压缩




微信开发者工具上传代码配置

说明:
顶部操作栏 > 详情 > 上传代码时自动压缩样式文件 / 上传代码时自动压缩脚本 / 上传代码时自动压缩wxml文件 / 上传代码时过滤无依赖文件(勾选)




使用发行模式

在 HBuilderX 的工具栏中依次单击发行 > 小程序-微信。
说明:
小程序发布前使用 HBuilderX 的发行功能进行打包。使用发行方式进行打包会删除代码中的 Source Map 等信息,打包体积最小。



然后单击发行,会在项目目录中的 unpackage/dist/build/mp-weixin 文件夹中生成微信小程序源码,再使用微信开发者工具打开该文件夹即可。

通用优化方案

删除 Debug 脚本

说明:
出于体积和安全双重因素考虑,请在发布前删除项目目录下debug 文件夹。可以节省约150kb包体积,生产环境推荐在服务端生成。
TUICallKit 的脚本文件存放于 TUICallKit/debug 目录。
TUIKit 的脚本文件存放于 TUIKit/debug目录。

托管项目中的静态资源

警告:
这一步往往是最影响包体积的一部分。
下面通过一个典型案例来说明:



从上图中的包体积分析中可以看出来, staic 中的静态资源达到了203KB,这些图片资源完全可以托管到服务器上,为主包节约203KB的大小。

公共样式统一加载

公共样式需要统一进行加载。不要每次进行引入,公共样式统一加载的好处不仅体现在减少代码重复,还有利于减少小程序包体积。

针对第三方 UI 库按需引入

使用 UI 库时只引入自己使用到的部分,按需引入只加载项目中实际使用的组件和样式,避免了整个 UI 库被打包,从而减小了最终产物的体积。

使用外部依赖优化包体积

警告:
Vue3 项目其他分包中的第三方依赖也会被打入主包中,导致主包体积膨胀,可以使用这种方式避免将分包中其他第三方依赖被打入主包中。
具体可以参见 如何使用外部依赖

单独集成 TUICallKit 体积优化

Vue2 项目

说明:
Vue2 使用 webpack 打包,独立分包中都会有单独的 vendor.js ,分包中的相关依赖不会打到主包里,不存在包体积问题。
TUICallKit 作为独立分包之后,没有占有任何主包体积,用户只需在 TUICallKit 分包中完成相关业务即可,包体积问题可以参考上述的通用体积优化方案

Vue3 项目

说明:
Vue3 使用 vite 打包,分包中的依赖会被打入主包中,造成主包体积过大问题。
1. 在根目录下新建 vite.config.js 文件
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";

// https://vitejs.dev/config/
export default defineConfig({
plugins: [uni()],
optimizeDeps: {
// 这里的 include 以 TUICallKit 为例,可以使用这种方式避免将分包中其他第三方依赖被打入主包中
include: ["tuicall-engine-wx",'@tencentcloud/tui-core', '@tencentcloud/chat'],
},
build: {
rollupOptions: {
external: ["tuicall-engine-wx",'@tencentcloud/tui-core', '@tencentcloud/chat'],
},
},
});
2. 构建 npm
因为 HBuilder 运行到小程序后,项目中的 package.json、node_modules 都不存在了。需要微信开发者工具的终端里,重新安装依赖。



3. 进入分包页面,重新下载依赖。
cd TUICallKit && npm init -y && npm i @tencentcloud/call-uikit-wechat
4. 构建 npm。




单独集成 TUIKit 体积优化

说明:
包体积问题可以参考上述的通用体积优化方案
由于要保证和 uniapp 打包 App 保证一致性 ,登录逻辑需要位于主包,主包中包含 Chat SDK 和 TUICore,大约占用约 800 KB,需要预留相关的主包体积。

TUIKit 和 TUICallKit 融合场景体积优化

Vue2 项目

说明:
包体积问题可以参考上述的通用体积优化方案
由于 TUICallKit 和 TUIKit 处于同一个分包下,分包体积会超出2MB, 需要将 Chat SDK 和 TUICore 转移到主包中,大约占用主包体积约800KB,需要预留相关的主包体积。

Vue3 项目

使用外部依赖的方式优化包体积
1. 在根目录下新建 vite.config.js 文件
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";

// https://vitejs.dev/config/
export default defineConfig({
plugins: [uni()],
optimizeDeps: {
// 这里的 include 以 TUICallKit 为例,可以使用这种方式避免将分包中其他第三方依赖被打入主包中
include: ["tuicall-engine-wx",'@tencentcloud/tui-core', '@tencentcloud/chat'],
},
build: {
rollupOptions: {
external: ["tuicall-engine-wx",'@tencentcloud/tui-core', '@tencentcloud/chat'],
},
},
});
2. 构建 npm
因为 HBuilder 运行到小程序后,项目中的 package.json、node_modules 都不存在了。需要微信开发者工具的终端里,重新安装依赖。



3. 进入分包页面,重新下载依赖。
cd TUIKit && npm init -y && npm i @tencentcloud/call-uikit-wechat
4. 构建 npm。




高级用法

警告:
下面这一部分,通过移除 UIKit 的某些您可能未使用到的组件来降低包体积,适用于上述的方法都未解决包体积问题时,请谨慎抉择!

移除客服插件

说明:
注释以下五段代码,大约可以减小约 50 KB 的包体积。
1. TUIKit/plugins/plugin-components/index.ts。






2. TUIKit/plugins/plugin-components/message-plugin.vue。




移除群通话组件

说明:
单独集成 TUICallKit,位于 TUICallKit/src/Components/TUICallKit.vue。
融合场景下,位于 TUIKit/TUICallKit/src/Components/TUICallKit.vue。
注释以下代码,大约可以减小约 40 KB 的包体积。