antd 번들 사이즈 줄이기

antd, antd-mobile, element-ui 등등 라이브러리를 많이 사용합니다
사용방법은 import { List } from 'antd-mobile'; 이런 방법으로 손쉽게 사용할 것입니다.
위처럼 사용하시다보면 아래와 같은 warning을 발견할 수 있습니다.

원인

You are using a whole package of antd-mobile,
please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.

• 말 그대로 전체 번들을 가져오고 있으니, 필요한 것만 추려서 가져다 써라 이런 뜻입니다.
• 그렇다면 해결해봅시다.

babel-plugin-import 설치

npm install babel-plugin-import --save-dev

.babelic 설정

{
  "presets": ["@babel/preset-env"],
  // 아래와 같이 위에 설치한 라이브러리를 플러그인으로 넣어줍니다.
  // libraryDirectory 값이 import로 불러올 변수가 됩니다.
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "lib" }, "ant"],
    [
      "import",
      { "libraryName": "antd-mobile", "libraryDirectory": "lib" },
      "antd-mobile"
    ]
  ]
}

사용

// 이렇게 사용하던 것을
import { List, Button } from "antd-mobile";

// 이렇게 사용하면 됩니다.
import List from "antd-mobile/lib/list";
import Button from "antd-mobile/lib/list";

• 한줄로 하던 것을 두줄, 세줄로 나오니 불편한 면이 있지만, 번들 사이즈를 현저히 줄일 수 있으므로 하나씩 필요한 것만 부르는 것이 더욱 시스템에 유리합니다.

#react #antd-mobile