在使用esbuild打包时，styled-components的displayName属性可能会被压缩或丢失。为了保留displayName属性，可以添加一个ESLint插件来自动更新styled-components的displayName。

步骤如下：

1. 安装eslint-plugin-styled-components插件：

npm install --save-dev eslint eslint-plugin-styled-components

2. 在.eslintrc文件中增加插件配置：

"plugins": ["styled-components"]

3. 在.eslintrc文件中增加规则配置：

"rules": {
  "styled-components/no-unused-styles": "error",
  "styled-components/require-await": "error",
  "styled-components/prefer-default-export": "error",
  "styled-components/display-name": "error",
  "styled-components/no-duplicate-props": "error",
  "styled-components/margin-props": [
    "error",
    {
      "ignoreTag": true
    }
  ],
  "styled-components/no-multiple-empty-lines": [
    "error",
    {
      "max": 1,
      "maxEOF": 0
    }
  ],
  "styled-components/selector-max-id": [
    "error",
    {
      "limit": 0
    }
  ],
  "react/jsx-no-target-blank": [
    "error",
    {
      "allowReferrer": true // this is useful for analytics tracking
    }
  ]
}

4. 修改代码中使用的styled-components引入方式：

import styled, { withTheme } from 'styled-components/macro';

5. 在组件类中定义static displayName属性：

class MyComponent extends React.Component {
  static displayName = 'MyComponent';
  ...
}

现在，在使用esbuild打包时，styled-components的displayName属性不会再丢失或被压缩。