软件开发团队介绍 uniapp确立微信小样子主包太大和vendor.js过大无法打包问题措置

你的位置:湖南软件开发 > 软件开发资讯 > 软件开发团队介绍 uniapp确立微信小样子主包太大和vendor.js过大无法打包问题措置
软件开发团队介绍 uniapp确立微信小样子主包太大和vendor.js过大无法打包问题措置
发布日期:2024-07-18 16:03    点击次数:112

绪论

在uniapp确立小样子这一块,信服许多确立者皆碰到过代码体积太大无法打包的问题,这本事就要优化小样子包大小。底下共享一下我的措置想路。但愿能给环球一些匡助吧。

秩序一:线上图片

小样子体积大是因为static目次的图片资源过大的话,咱们不错将static的图片上传图片处事器上去,小样子使用通顺的面容来下载使用图片。

静态图片使用线上地址,不要放到花样中,除了navBar的icon,因为阿谁只可使用腹地资源,相对来说这个不大。

1、上传图片资源到图片处事器上去

将切好的图片上传到图片处事器上头,

比如 https://www.xxxxxxxx.com.cn/wx/static/images/1.png

2、处理JS和vue中的图片援用

2.1、界说JS全局变量

在main.js页面界说js全局变量

2.2、替换vue中的图片地址

畴前咱们援用的图片地址是底下这么的:

目下咱们修改src成这么即可:

3、处理css中的图片援用

uniapp根目次下有一个终点的文献uni.scss,在代码中无需 import 这个文献即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack建设中终点处理了这个uni.scss,使得每个scss文献皆被注入这个uni.scss,达到全局可用的收尾。咱们将scss的static目次变量放到这里,即可全局使用了。

3.1、界说scss全局变量

在uni.scss的终末添加:

3.2、css文献更名成scss文献

将正本的css文献更名成scss文献,并像底下这么修改vue中的援用。加上了lang=“scss”

3.3、替换css中的图片地址

畴前css中的配景图地址是底下这么的:

目下咱们修改url成这么即可:

秩序二:分包加载

除了TabBa的页面,其他的页面进行分包处理,保证主包的大小,因为在编译后那些静态js和组件也会放入主包中,分包方式官网有谨防评释。

目下小样子分包大小有以下截止:

通盘小样子通盘分包大小不卓绝 20M单个分包/主包大小不成卓绝 2M

对小样子进行分包,不错优化小样子初度启动的下载时分,以及在多团队共同设随即不错更好的解耦互助。

具体使用秩序请参考:

官网先容使用分包落寞分包分包预下载分包异步化

秩序三:依赖分手

使用分包之后会发现碰到了一个奇怪的问题,子包的组件和js文献会被打包到主包的vendor.js文献中,这就导致了vendor.js过大。

1、查抄manifest.json,在这个文献下的源码视图中,软件开发团队介绍在mp-weixin节点有个optimization,

optimization下的subpackages节点时用来畛域微信分包的,需要将此节点设为true

2、建设好重走时行,会发现分包的js文献将不会再打包到主包的vendor.js中了

秩序四:代码压缩

1、在HBuilder上头点击运行——>运行到小样子模拟器——>运行时是否压缩代码

组选类型判断:最近5期排列三开出2次组六号码,本期重点关注组六号码出现。

也因此,刮刮乐“翻6倍”一上市就备受“刮奖控”追捧,中奖捷报频传,陕西省彩民好运不断。这不,西安雁塔再传喜讯,高女士(化名)刮中最高奖金60万!

2、在HBuilder上头点击刊行——>小样子——>刊行——>小样子-微信(仅适用于uni-app)(W)

3、输入小样子称号和appid点击刊行即可。然后畛域台会启动编译,等编译好了会自动翻开微信确立者用具。

淌若手动刊行,则点击刊行按钮后,会在项蓄意目次 unpackage/dist/build/mp-weixin 生成微信小样子花样代码。在微信小样子确立者用具中,导入生成的微信小样子花样,测试花样代码运行往常后,点击“上传”按钮,之后按照 “提交审核” => “发布” 小样子轨范进程,徐徐操作即可。淌若在刊行界面勾选了“自动上传微信平台”,则无需再翻开微信用具手动操作,将平直上传到微信处事器提交审核。

4、目下松开了许多,畴前3.2M,目下唯有1.8M,目下岂论是用来上传代码还是调试皆透顶莫得问题了。

app

5、“运行” 和 “刊行” 的区别:

运行:模式有 SourceMap 不错便捷的进行断点调试;编译出的代码存放于根目次下的 /dist/dev/目次。刊行:模式会将代码进行压缩,体积更小更合乎发布为郑再版哄骗;编译出的代码存放于根目次下的 /dist/build/ 目次。

追溯

到此这篇对于uniapp确立微信小样子主包太大和vendor.js过大无法打包问题措置的著述就先容到这了软件开发团队介绍,更多议论uniapp小样子主包太大无法打包践诺请搜索剧本之家畴前的著述或接续浏览底下的议论著述但愿环球以后多多赞成剧本之家!