uni-app编译成小程序打包后.wxss(css文件)过大的问题

子成君 12 0

问题描述:

如图:

uni-app编译成小程序打包后.wxss(css文件)过大的问题

在uni.scss通过import导入的全局样式在编译后的每个.wxss文件里都加载了一遍,导致大量样式重复和小程序包体积过大

解决思路

查看社区讨论

在dcloud社区找了一下有相同问题的单没有准确回答的,网上搜了一下看有人说分包吧, 我: .....

分析编译文件,逐步排查

分包是治标不治本,仔细研究了一下uni-app编译小程序的过程,

发现写在app.vue里的全局样式是没有被重复加载的,uni.scss引入文件里的样式变量也是没有被重复加载的,

被重复加载的只有uni.scss引入的样式文件里的css样式,真相了....

总结

编译后的每个 wxss 文件都有重复的公共css,而这些css 样式都是放到根目录uni.scss文件里的,而uni.scss文件里定义的变量却不会被重复加载

解决办法

uni.scss 里只定义或引入样式变量,而其他的css都写在app.vue里或在app.vue里引入就可以了

最后再上张图,解决之后:

uni-app编译成小程序打包后.wxss(css文件)过大的问题

发表评论 取消回复
OwO 图片 链接 代码

分享