【vue3】uniapp 微信小程序打包优化【超详细】-Toy模板网

这篇具有很好参考价值的文章主要介绍了【vue3】uniapp 微信小程序打包优化【超详细】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目场景：

使用HBuilder编辑器编译uniapp的项目转为微信小程序，并上传发布项目

问题描述

微信小程序官网限制发布的主包大小不能超过2mb，我的项目编译后大小为3mb

原因分析：

1.vendor.js文件过大，打包的时候并没有设置为mini版
2.项目的主包太大，并没有分包出去(后面会详细说明如何分包)

解决方案：

1.把微信小程序右上角该压缩的都√上，把项目中的图片在线压缩

【vue3】uniapp 微信小程序打包优化【超详细】

2.HBuilder编译uniapp为微信小程序时，设置压缩。步骤如下

找到项目根目录的package.json,找到dev:mp-weixin这一行，在命令行后加 --watch --minimize

"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize",

【vue3】uniapp 微信小程序打包优化【超详细】

3.分包（最大的缺点就是需要修改项目结构），详细流程如下:

3.1 需要你把原本的pages文件下的文件分离出来，如以下
【vue3】uniapp 微信小程序打包优化【超详细】
3.2 在项目的pages.json文件里pages里对象path路径就不能跟subPackages里对象path路径重复。

3.3 在项目src下找到mainfest.json文件，在mp-weixin中添加以下代码(分包设置)

"optimization":{
    "subPackages":true
}

【vue3】uniapp 微信小程序打包优化【超详细】

最后效果

【vue3】uniapp 微信小程序打包优化【超详细】

✨ $\textcolor{gray}{踩坑不易，还希望各位大佬支持一下}$

📃 $\textcolor{green}{个人主页：}$ 沉默小管

📃 $\textcolor{green}{个人网站：}$ 沉默小管

📃 $\textcolor{green}{个人导航网站：}$ 沉默小管导航网

🔥 $\textcolor{green}{技术交流QQ群：837051545}$

👍 $\textcolor{green}{点赞，你的认可是我创作的动力！}$

⭐️ $\textcolor{green}{收藏，你的青睐是我努力的方向！}$

✏️ $\textcolor{green}{评论，你的意见是我进步的财富！}$

如果有不懂可以留言，我看到了应该会回复
如有错误，请多多指教文章来源地址https://www.toymoban.com/news/detail-484385.html