uniapp小程序分包加载优化,图片分包记录

本文介绍了解决小程序因体积过大导致无法上传的问题的方法,包括页面分包、图片分包等技术细节,并提供了具体实现步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

因为小程序的大小有限制,单包不能超过2M,整包不能超过16M,如果小程序太大,不做分包处理的话就无法上传成功。

1、页面分包

详情查看https://uniapp.dcloud.io/collocation/pages?id=subpackages

如果分包的自定义组件只有分包里面才使用,那么这个组件文件夹可以放到分包里面,这样打包的时候就不会分包到主包里。tabBar的页面必须放在主包里。

2、根据目录再pages.json

         

注意:写在subPackages里面的pages的路径就不能写在pages里面了。

 在HBuilderX中文件manifest.json中选择源码视图,找到mp-weixin添加“optimization”:{"subPackages":true}开启分包优化

3、图片的分包,因为static默认是被打包到主包的,如果图片比较多的话,也是会占用很多资源的,所以如果图片最好也做分包,可以放在新建的文件夹,比如images。

images文件夹下新建文件夹dataView、pages、personal,这几个文件夹的名字要和分包的文件夹一样,然后再images对应的分包文件夹下面在新建一个img文件夹放图片

然后再根目录下新建vue.config.js

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([
        {
          from: path.join(__dirname, '/images'),
          to: path.join(__dirname+'/unpackage/', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, '/')
        }
      ])
    ]
  }
}

在根目录下命令行输入

npm install copy-webpack-plugin --save-dev

分包内代码引用图片

<image src="/分包名称/img/图片名称"></image>
<image src="/dataView/img/图片名称"></image>

图片分包的另一个方法:

在对应分包目录下新建static目录,然后将图片放到static目录下,这样也会把静态文件直接打包到分包内。

### UniApp 小程序分包加载配置教程与最佳实践 #### 1. 分包的基本概念 小程序分包机制是为了优化下载和启动速度,避免因整体体积过大而导致加载缓慢。在 UniApp 中,从版本 2.7.12 开始支持小程序分包配置[^1]。分包的核心思想是将小程序划分为多个独立的部分(分包),每个部分仅包含特定功能或页面所需的资源。主包负责存放默认启动页面、TabBar 页面以及公共资源/JS 脚本,而分包则根据需求动态加载。 #### 2. 分包的必要性 随着小程序功能的扩展,代码量和资源文件逐渐增多,导致整体体积可能超过平台限制(如微信小程序规定主包大小不能超过 2M)。通过分包机制,可以有效降低主包的体积,同时按需加载分包内容,提升用户体验[^3]。 #### 3. 分包配置步骤 以下是 UniApp 小程序分包的具体配置步骤: - **目录结构设计** 在项目中创建分包目录,并将相关页面和资源文件放入对应的分包中。例如: ```plaintext ├── pages │ ├── index │ └── logs ├── subpackages │ ├── packageA │ │ └── pages │ │ ├── cat │ │ └── dog │ └── packageB │ └── pages │ ├── apple │ └── banana ``` 这里的 `subpackages` 目录用于存放所有分包,每个分包下可以包含多个页面[^4]。 - **pages.json 配置** 在 `pages.json` 文件中定义分包规则。示例如下: ```json { "pages": [ { "path": "pages/index/index", "style": {} }, { "path": "pages/logs/logs", "style": {} } ], "subPackages": [ { "root": "subpackages/packageA", "pages": [ { "path": "pages/cat/cat", "style": {} }, { "path": "pages/dog/dog", "style": {} } ] }, { "root": "subpackages/packageB", "pages": [ { "path": "pages/apple/apple", "style": {} }, { "path": "pages/banana/banana", "style": {} } ] } ] } ``` 上述配置中,`subPackages` 定义了两个分包:`packageA` 和 `packageB`,并指定了各自的根路径和页面列表[^2]。 - **manifest.json 配置(针对 App 端)** 如果需要在 App 端启用分包功能,则需要在 `manifest.json` 文件中进行额外设置。具体操作请参考 UniApp 官方文档[^1]。 #### 4. 分包加载机制 小程序启动时,默认会下载主包并加载其中的页面。当用户访问某个分包内的页面时,系统会自动检测并下载该分包的内容,完成后展示对应页面。这种按需加载的方式能够显著减少首次加载时间[^2]。 #### 5. 最佳实践 - **合理划分分包** 根据功能模块划分分包,确保每个分包的功能相对独立。例如,将登录模块、商品详情模块、个人中心模块分别放置在不同的分包中。 - **控制主包大小** 主包应尽量精简,仅保留必要的公共资源和启动页面。避免将过多的逻辑或资源文件放入主包中[^3]。 - **测试分包加载性能** 使用工具或平台提供的调试功能,测试分包加载的速度和稳定性,确保在弱网环境下也能正常工作。 - **使用懒加载技术** 对于非核心功能的页面,可以采用懒加载策略,进一步优化资源加载效率。 ```python # 示例:懒加载分包页面 function lazyLoadPage(pagePath) { return new Promise((resolve, reject) => { const page = require(pagePath); resolve(page); }); } ``` #### 6. 注意事项 - 确保分包路径和页面路径配置正确,否则可能导致页面无法加载。 - 测试分包功能时,建议覆盖多种设备和网络环境,以验证兼容性和稳定性。
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LLL_LH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值