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

子成君 173 2

问题描述:

如图:

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 图片 链接 代码

  1. 未名
    未名 超级小萌新

    我裂开了,困扰一天的问题解决了。搞了半天代码压缩,自定义编译,分包,实在分不了了,结果主包还是那么大,寻思也没有写多少代码。
    后来去看编译后的文件,一个个排查,开始以为是vendor.js的问题,但这个文件也不大,就几百k。继续排查,发现组件里面编译出来的wxss不对劲,都太大了。
    然后百度到这篇文章,茅塞顿开,恍然大悟。真从没想过css也能使绊子。
    为了css复用,又不想写在App.vue里面,也不想直接写在uni.scss里面,就另外搞了个文件,然后在uni.scss中引入,最后酿成大错。
    楼主好人,感谢楼主。

分享