antd 테마를 더 작은 구성 요소로 분할하는 방법

최근에 저는 직장에서 흥미로운 문제를 우연히 발견했습니다. ant-design을 사용 중이었고 기본 테마 변수를 사용자 지정하고 싶었습니다. 이를 위해 theme.less를 만들었습니다.

@import '~antd/dist/antd.less';

@primary-color: #003dff;
@dark-color: #38b6ab;
@font-family: Inter;

webpack-bundle-analyzer을 살펴보기 전까지는 모든 것이 괜찮았습니다. theme.less가 전체 번들 크기의 상당 부분을 차지하는 것을 확인했습니다.

여기서 문제는 무엇입니까?

@import '~antd/dist/antd.less'에 의해 실수로 전체 antd 스타일을 가져온 것으로 나타났습니다. 그것 때문에 theme.less 너무 큽니다. 그것을 고치는 방법? 인터넷 검색을 한 후 번들 크기를 줄일 수 있는 약 2단계를 발견했습니다.

webpack을 통해 antd 테마 사용자 정의

antd 구성 요소를 사용할 때 transpiler(babel)에게 css를 주입하라고 지시합니다

.

antd 테마 커스터마이징

antd 테마를 사용자 정의하는 방법은 무엇입니까? antd docs에 따르면 웹팩options에 less-loader를 추가할 수 있습니다.

// the rest of webpack config
module.exports = {
  module: {
    rules: [
      // the rest of loaders setup
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                modifyVars: {
                  // override antd default styles
                  'primary-color': '#003dff',
                  'dark-color': '#38b6ab',
                  'font-family': 'Inter',
                },
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
    ],
  },
};

CSS를 삽입하도록 babel 설정

내가 추가한 두 번째 최적화는 babel-plugin-import 을 통해 내 애플리케이션 내부의 antd 구성 요소에서 사용하는 스타일만 추출하는 것이었습니다. 아래에서 이 플러그인의 권장 구성을 볼 수 있습니다.

{
  // rest of .babelrc
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

요약 및 요약

이 블로그 게시물에서는 전체 라이브러리 스타일을 가져오지 않고 antd 테마를 재정의하는 방법과 애플리케이션에서 실제로 사용되는 스타일만 사용하는 방법에 대해 썼습니다.