Отключить displayName в производстве

Question

Я использую styled-components 4.0 в приложении CRA 2.0. По умолчанию имя компонента отображается в DOM следующим образом

<button class="Button-asdf123 asdf123" />

вместо

<button class="asdf123" />

Это очень полезно при разработке. Интересно, как отключить добавленное имя компонента для класса в производственной среде, так как это избыточно?

Answer 1

В соответствии с документом в стиле компонентов , вы должны иметь возможность управлять им через опции плагина babel

https://github.com/styled-components/babel-plugin-styled-components

По сути, ваш конфиг веб-пакета для производственной сборки должен выглядеть следующим образом

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "displayName": false
      }
    ]
  ]
}

Поскольку вы используете CRA, у вас, вероятно, нет доступа к конфигурации веб-пакета, если только вы не удалите (если я правильно помню)

Если вы используете макрос стилей компонентов, вы можете сделать это без извлечения, поместив эту конфигурацию в один из файлов , указанных здесь