taro CSS 样式重复打包

icnyk63a  于 2023-02-04  发布在  其他
关注(0)|答案(3)|浏览(282)

相关平台

飞书小程序

复现仓库

git@github.com:Gino2333/FerishuTaroTest.git

使用框架: React

复现步骤

写两个组件,引用相同的样式
打包
结果两个组件中相同的样式被重复打包

期望结果

相同的样式不会被重复打包

实际结果

相同的样式被重复打包

环境信息

👽 Taro v3.5.8

  Taro CLI 3.5.8 environment info:
    System:
      OS: macOS 10.15.7
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 14.19.2 - ~/.nvm/versions/node/v14.19.2/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v14.19.2/bin/yarn
      npm: 9.1.3 - ~/.nvm/versions/node/v14.19.2/bin/npm
    npmPackages:
      @tarojs/cli: 3.5.8 => 3.5.8 
      @tarojs/components: 3.5.8 => 3.5.8 
      @tarojs/helper: 3.5.8 => 3.5.8 
      @tarojs/plugin-framework-react: 3.5.8 => 3.5.8 
      @tarojs/plugin-platform-alipay: 3.5.8 => 3.5.8 
      @tarojs/plugin-platform-jd: 3.5.8 => 3.5.8 
      @tarojs/plugin-platform-qq: 3.5.8 => 3.5.8 
      @tarojs/plugin-platform-swan: 3.5.8 => 3.5.8 
      @tarojs/plugin-platform-tt: 3.5.8 => 3.5.8 
      @tarojs/plugin-platform-weapp: 3.5.8 => 3.5.8 
      @tarojs/react: 3.5.8 => 3.5.8 
      @tarojs/router: 3.5.8 => 3.5.8 
      @tarojs/runtime: 3.5.8 => 3.5.8 
      @tarojs/shared: 3.5.8 => 3.5.8 
      @tarojs/taro: 3.5.8 => 3.5.8 
      @tarojs/taro-h5: 3.5.8 => 3.5.8 
      @tarojs/webpack5-runner: 3.5.8 => 3.5.8 
      babel-preset-taro: 3.5.8 => 3.5.8 
      eslint-config-taro: 3.5.8 => 3.5.8 
      react: ^18.0.0 => 18.2.0
uurv41yg

uurv41yg1#

Taro3的设计就是如此,可以理解为Taro3中所有组件都会 addGlobalClass,样式会全部合并到 app.wxss。
最好改类名,例如用 BEM 写法来写组件类名。

gblwokeq

gblwokeq2#

Taro3的设计就是如此,可以理解为Taro3中所有组件都会 addGlobalClass,样式会全部合并到 app.wxss。 最好改类名,例如用 BEM 写法来写组件类名。

我遇到的是下面的情况

// style.less
.test { display: block }

// componentA
@import ../style.less

// componentB
@import ../style.less

打包结果:
// common.wxss
.test { display: block }
.test { display: block }

同样路径的样式,并且都是通过 @import 在顶部引用,感觉这样的没必要打包两遍

xmd2e60i

xmd2e60i3#

使用 build 命令,会把一部分相同的样式压缩掉。但是有的就不行,比如 @font-face 这样的属性,有时候是一个 base64 字体非常大,重复打包的话,对包体积很有影响

相关问题