当微信小程序包超过2MB限制时,确实会带来很多开发困扰。以下是我在实际项目中验证过的有效解决方案,超越了官方文档的常规建议:
本方案所有小程序平台通用
Error: 代码包大小超过限制,main package source size 2071KB exceed max limit 2048KB [20250501 17:25:40][wx337dd8507de584a8] [1.06.2412050][win32-x64]查看文件列表代码依赖分析
今天卓伊凡啦了同事的代码,检查 更新的代码并且为客户打包,发现超过2M
miniprogram-node-modules
工具将node_modules中只需要的部分代码提取出来npm install miniprogram-node-modules -g
miniprogram-node-modules vant-weapp -d ./components/vant
// 动态加载组件示例
Page({
loadComponent() {
require('./expensive-component.js')
this.setData({ showComponent: true })
}
})
tinypng *.png -k YOUR_API_KEY -o compressed/
{
"preloadRule": {
"pages/index": {
"network": "wifi",
"packages": ["important-subpackage"]
}
}
}
common
目录require
相对路径引用主包代码subpackages
时设置independent: false
wx.loadSubpackage({
name: 'subpackage-name',
success(res) {
console.log('分包加载成功')
},
fail(res) {
console.error('分包加载失败', res)
}
})
https://cdn.example.com/image.jpg?imageView2/2/w/300
font-spider
提取页面中用到的字体字形font-spider ./pages/*.wxml
<live-player>
播放直播流替代本地视频// webpack.config.js
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
minSize: 20000,
maxSize: 244
}
}
}
depcheck
找出未使用的依赖npx depcheck
uglifyjs filter.wxs -o filter.min.wxs
uglify-js
+ babel-minify
组合{
mangle: {
reserved: ['require', 'module', 'exports']
},
compress: {
drop_console: true,
pure_funcs: ['console.log']
}
}
protobuf.js
处理大量结构化数据<web-view>
承载非核心功能(注意跳转限制)# 安装分析工具
npm install -g miniprogram-size
# 分析包大小
miniprogram-size dist/
# .github/workflows/build.yml
- name: Check size
run: |
SIZE=$(du -sk dist/ | cut -f1)
if [ $SIZE -gt 2048 ]; then
echo "Package too large!"
exit 1
fi
diff -rq v1.0/dist v1.1/dist | grep differ
这些方案都是我在实际项目中验证过的,特别要注意的是微信会不定期调整包大小检测策略,建议定期测试不同方案的稳定性。对于特别大的项目,组合使用多种方案效果最佳。
不过上面所有的方案都比较复杂,根据观察,优雅草本项目图片就占用1m,因此处理图片方便
因此我把图片传入七牛
建立好对应目录后 传入所有图片 资源也按照本地的分类
要对应目录传,这样避免改路劲
将所有的 资源路径替换为七牛云地址
删除本地图片,除了保留了 qidong 这个启动图logo,因为启动图logo路劲必须本地
运行后还是另外还有报错,由于默认page.json 里面的 tabbar也不能出现// 所以至少这部分 还是得本地
然后 继续报错,像类似这种图像要遍历 序号的,就没法远程
<image class="square-54" :src="`/static/images/home/icon-${index + 1}.png`"></image>
像这样的,其实卓伊凡 真想提出来,都2025年了,为什么小程序还是要控制前端代码在2M以内
终于上传成功。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。