乐趣区

关于前端:taroui-微信小程序开发-代码包超过2048kb导致不能上传和真机调试问题

开发环境:
@tarojs/taro”: “3.1.2”
taro-ui”: “taro-ui@next
@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(见下图)

退出移动版