微信小程序包大小超过2M的解决方法—分包加载

当小程序代码包超过2M时,可以通过优化代码、删除无用资源、图片压缩或上传服务器来减小包大小。微信支持分包加载,首次加载主包,后续按需加载分包,加快启动速度。分包应按功能划分,避免耦合,并正确配置在app.json中。uniapp和taro等框架也有相应的分包配置方法。

小程序的包被限制在2M以下, 超出的时候点击预览, 发现报错:
Error: 代码包大小为 3701 kb,上限为 2048 kb,请删除文件后重试

解决方法:
  1. 优化代码, 删除掉不用的代码

  2. 图片压缩或上传服务器

一般图片所占空间较大,尽量不要放在小程序本地文件夹中,如果图片不多我们也可以对图片进行压缩,我经常使用的图片压缩平台:点击这里;

也可以将图片上传到服务器上,进行外链引用, 我们使用的是阿里云oss存储, 另外也可以通过图片托管平台对图片进行托管, 我找到的的图片托管平台:点击此处;

另外, 通过cli命令创建的uni app项目,可将图片或字体图标放入assets文件夹下,通过require引入, 也可减少主包大小

  1. 分包加载

官方推出小程序分包加载这一功能,对于万千小程序开发者来说这无疑是天大的喜讯,关于如何分包,微信官方文档已经解释的十分清楚,在进行分包之前建议认真阅读官方文档。

对于用户来说,小程序的加载流程变成了:

1,首次启动,加载小程序主包,显示主包内的页面
2,如果用户进入了某个分包的页面,再加载这个对应分包,显示分包的页面

采用分包加载,对于开发者而言,能使小程序有更大的代码体积,承载更多的功能和服务,对于用户而言,可以更快的打开小程序,同时再不影响启动速度的前提下使用更多功能。

分包的划分:

在配置前首先需要开发者规划下各个分包需要容纳的内容,建议开发者按照功能划分的原则,将同一个功能下的页面和逻辑放置于同一个目录下,对于一些跨功能之间的公共逻辑,将其放置于主包下,这样可以确保在分包引用这部分功能时,这部分的逻辑一定存在。

在分包划分时,应该注意以下事项:

1,避免分包与分包之间引用上的耦合。因为分包的加载是用户操作触发的,并不能确保其分包加载时,
另一个分包就一定存在,这个时候可能导致js逻辑异常,某些资源找不到的错误;
2,一些公共用到的自定义组件,需要放在主包内;
3,使用小程序自带的tab切换时,list中的页面需要放在主包内。

分包的配置:(微信客户端 6.6.0,基础库 1.7.3 及以上版本开始支持。)

当理清了分包的划分后,就可以进行分包的配置了,这一步并不复杂。

假设支持分包的小程序目录结构如下:

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

开发者通过在 app.jsonsubPackages字段声明项目分包结构:

{
   
   
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages"
### 解决微信小程序主包大小超过2MB的方法 #### 一、分包加载策略 为了有效降低主包体积,可以采用分包加载的方式。这种方式允许将应用的不同部分拆分为多个子包,只有当用户访问特定页面时才下载对应的分包内容[^1]。 对于uni-app框架而言,在`pages.json`中定义各个分包及其入口文件路径即可实现这一目标: ```json { "subPackages": [ { "root": "packageA", "name": "packa", "pages": ["index"] }, ... ] } ``` #### 二、代码压缩与混淆处理 通过对JavaScript、CSS等静态资源进行压缩以及启用 uglifyjs 插件来减少最终打包后的文件尺寸;同时还可以考虑移除不必要的注释信息并开启Gzip压缩传输以进一步减小网络请求的数据量[^2]。 在vue.config.js里设置如下参数可完成上述操作: ```javascript module.exports = { productionSourceMap: false, configureWebpack: config => { if (process.env.NODE_ENV === 'production') { Object.assign(config.optimization.minimizer[0].options, { terserOptions : { compress: {}, mangle: true } }) } } }; ``` #### 三、图片及其他媒体资源整合 针对大图或频繁使用的图标素材建议使用base64编码内嵌至样式表中,而对于其他类型的多媒体文件则应尽可能选用轻量化格式,并合理规划缓存机制以便重复利用已加载过的资源[^3]。 另外需要注意的是,如果项目中有大量相似度较高的图像,则可以通过SVG Sprite技术来进行批量管理和按需渲染显示。 #### 四、依赖库精简 仔细审查项目的第三方依赖项列表,去除那些不必要或是冗余的部分。比如某些UI组件库可能自带了很多不会被实际调用的功能模块,此时可以选择更小巧的基础版本或者自定义构建只保留所需特性[^4]。 最后提醒一点就是关于Vender文件过大问题,这通常是因为包含了太多公共函数而导致的结果。因此可以在编写业务逻辑的时候注意分离出独立的服务层接口供各处调用而不是直接复制粘贴相同片段造成浪费。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值