Antd-mobile is giving warning: "You are using a whole package of antd-mobile"

Question

I followed the instructions in antd-mobile usage link for importing antd-mobile using babel-plugin-import, however when I use an import of the format:

import {Card as CardMobile, WhiteSpace} from 'antd-mobile';

This warning still appears in the browser console log:

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

I can resolve the warning by using manual import references:

import WhiteSpace from 'antd-mobile/lib/white-space';
import 'antd-mobile/lib/white-space/style/css';
import CardMobile from 'antd-mobile/lib/card';
import 'antd-mobile/lib/card/style/css';

but I was hoping to use the less verbose, non-manual form.

Here's the plugin configuration settings in .babelrc:

  "plugins": [
    "@babel/proposal-class-properties",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/transform-runtime",
    ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "antd"],
    ["import", { "libraryName": "antd-mobile", "libraryDirectory": "lib"}, "antd-mobile"],
    ["babel-plugin-webpack-alias", { "config": "./webpack.config.common.js" }]
  ],

Here are some of the package versions from package.json (let me know if any other package versions are needed):

"antd-mobile": "2.3.4",
"babel-plugin-import": "1.11.2",
"@babel/core": "7.2.2",

Answer 1

Use modularized antd-mobile From antd-mobile site metioned How does it work?

Go to the target page, you will see (sorry for I can't post image directly for now):

snapshot, click to check out

you might still be using [email protected] or have a wrong webpack config which can't support tree shaking.

Answer 2

import {Card as CardMobile, WhiteSpace} from 'antd-mobile';

here you are accessing the whole package. we need to split it down.

import Card as CardMobile from 'antd-mobile/Card';
import WhiteSpace from 'antd-mobile/WhiteSpace';

now we are importing only the specific things, what we will be using in our file.