uniapp生成微信小程序 分包

本文详细介绍了微信小程序中如何进行分包配置,包括在manifest.json和page.json中添加相关设置,以及如何检查主包和分包的体积。通过合理分包,可以有效控制每个包的大小,确保不超过2MB的限制。此外,还提供了查看主包和分包体积的方法,以辅助开发者进行性能优化。

1.manifest.json

找到mp-weixin下添加"optimization":{“subPackages”:true}

2.page.json

跟page平级添加"subPackages": []//分包数组
例:“pages”: [ //pages数组中第一项表示应用启动页
{
“path”: “pages/index/index”,
“style”: {
“navigationBarTitleText”: “首页”
}
},
],
“subPackages”: [//分包数组 所有的分包路径写在这个里面
{
“root”: “pages/XX”,//‘XX’是pages下的分包文件名称
“pages”: [{
“path” : “XX文件下的目录名/文件路径”,
“style” :{}
}]
}
]

3.运行到微信开发工具

点击右上角详情=>基本信息=>本地代码=>点击代码可查看主包、分包体积大小
在这里插入图片描述

4.主包、分包 最大体积是2M,如果体积过大,需建立多个分包

### 减小 UniApp 打包微信小程序分包体积的方法 #### 配置优化 为了有效控制分包体积,在 HBuilderX 的 `manifest.json` 文件中可以通过配置 `"optimization"` 字段来启用分包功能。通过以下配置可以实现自动分包逻辑: ```json { "optimization": { "subPackages": true } } ``` 此配置会帮助开发者自动生成合理的分包结构,从而减少手动调整的工作量[^2]。 #### 使用按需加载组件库 如果项目中引入了大型 UI 库(如 uView 或 Vant),可能会显著增加代码包的体积。推荐采用 **按需加载** 方式仅导入实际使用的组件,而不是整个库文件。例如,对于 uView,可以在项目的入口文件中这样配置: ```javascript import uview from 'uview-ui'; Vue.use(uview, { components: ['uButton', 'uToast'] }); // 只加载必要的组件 ``` 这种方式能够大幅削减未被使用却打包进来的冗余代码,进而缩小整体体积。 #### 图片资源压缩与懒加载 图片通常是导致应用臃肿的主要原因之一。应考虑对所有静态图像执行高效的压缩处理,并利用 lazyload 技术延迟加载不在初始视图内的媒体内容。此外还可以替换为更轻便格式(比如 WebP 替代 PNG/JPG)以进一步节省空间。 #### 移除无用依赖项 定期审查 node_modules 中安装的各种第三方模块是否有真正必要存在其中;移除非生产环境所需的测试工具或其他无关紧要的东西也能带来一定效果。运行命令如下所示可清理不必要的 npm 包: ```bash npm prune --production ``` 以上措施有助于精简最终产物中的外部库集合[^1]。 #### 动态加载远程脚本 针对某些不常访问的功能模块或者大尺寸 JS/CSS 资源文件,则可以选择将其托管至 CDN 并通过动态请求的方式来获取它们而非直接嵌入本地构建成果里头。这不仅减轻了初次下载负担还可能借助浏览器缓存机制加快后续调取效率。 综上所述,通过对上述几个方面的综合施策——合理规划子包包架构、精细化管理公共资源以及剔除多余组成部分等等举措相结合起来共同作用于降低 uni-app 构建出来的 WeChat Mini Program 总体量之上达到预期目标。 ```python # 示例 Python 伪代码展示如何模拟分析过程 (并非真实用于 mini program) def analyze_package_size(): total_size = calculate_total_size() if total_size > MAX_ALLOWED_SIZE: optimize_images() # 压缩图片 remove_unused_dependencies() # 清理不用的依赖 enable_lazy_loading() # 启用懒加载 split_into_subpackages() # 进行分包 analyze_package_size() ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值