taro 微信小程序开发 代码包超过2048kb导致不能上传和真机调试问题

Cris

开发环境:
@tarojs/taro": "3.1.2"
taro-ui": "[email protected]
@tarojs/react": "3.1.2"

问题描述:

在微信开发中工具里面点击真机调试,出现上述提示 ,点击上传同样有这个提示。

解决分案:
我们执行yarn build:weap后,发现,里面的wxss文件很大,有150多kb大小(见下图)

定位到问题后,我们理了下之前的思路:

  1. 项目中的taro-ui样式文件引入的方式,在app.scss里面引入了自定义的./custom-variables.scss文件,custom-variables.scss文件里面引入了了taro-ui的默认样式文件@import "~taro-ui/dist/style/index.scss"。
  2. 为了能够在所有的scss文件里面能够用上taro-ui样式文件里面的主题变量,我们根据taro的官网配置了sass,其作用是可以往所有 scss 文件头部插入 scss 代码。

查看~taro-ui/dist/style/index.scss文件发现,它由三个文件组成:

结合上面两点,也就是说我们所有的scss文件的头部都导入了这三个文件:'./variables/default.scss'(小文件)、'./mixins/index.scss'(大文件)和'./components/index.scss'(大文件),这直接导致编译后,每个wxss文件非常大。
原因找到以后,问题就好解决了,其实我们只是希望在所有的scss文件里面能用上taro-ui样式文件里面的主题变量,也就是./variables/default.scss这个小文件,因此./custom-variables.scss里面只需引入./variables/default.scss这个小文件就可以了,而不是包含三个文件的~taro-ui/dist/style/index.scss。至于'./mixins/index.scss'(大文件)和'./components/index.scss'(大文件)这两个大文件是taro-ui组件相关的样式,因此我们只需要在app.scss文件里面引入一下就OK了。
按照这个思路,修改后,再编译后,除了app.wxss文件稍大一点外(因为它引入的是~taro-ui/dist/style/index.scss),其余的wxss文件都很小一两k有的甚至只有几百b(见下图)

FAQ
如何自动在每个单独的 SCSS 文件中引入 SCSS 全局变量?
相信看了本文的解题思路,你应该知道该如何引入了。

阅读 3.8k
36 声望
0 粉丝
0 条评论
36 声望
0 粉丝
文章目录
宣传栏