Ant-design-vue: Can not Import individual component

[tuantmtb]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.5.1

Environment

Vue: 2.6.11

Reproduction link

https://github.com/vueComponent/ant-design-vue

Steps to reproduce

In main.js

import Vue from 'vue'


import { default as ALayout } from 'ant-design-vue/lib/layout'
import '@/assets/lib/ant-design-vue/lib/layout/style'

import { default as ARow } from 'ant-design-vue/lib/row'
import '@/assets/lib/ant-design-vue/lib/row/style'

import { default as ACol } from 'ant-design-vue/lib/col'
import '@/assets/lib/ant-design-vue/lib/col/style'

import { default as AMenu } from 'ant-design-vue/lib/menu'
import '@/assets/lib/ant-design-vue/lib/menu/style'

import { default as AIcon } from 'ant-design-vue/lib/icon'
import '@/assets/lib/ant-design-vue/lib/icon/style'

import { default as AButton } from 'ant-design-vue/lib/button'
import '@/assets/lib/ant-design-vue/lib/button/style'

import { default as AForm } from 'ant-design-vue/lib/form'
import '@/assets/lib/ant-design-vue/lib/form/style'

import { default as ASelect } from 'ant-design-vue/lib/select'
import '@/assets/lib/ant-design-vue/lib/select/style'

import { default as AInput } from 'ant-design-vue/lib/input'
import '@/assets/lib/ant-design-vue/lib/input/style'

import { default as AInputNumber } from 'ant-design-vue/lib/input-number'
import '@/assets/lib/ant-design-vue/lib/input-number/style'

import { default as ACheckbox } from 'ant-design-vue/lib/checkbox'
import '@/assets/lib/ant-design-vue/lib/checkbox/style'

import { default as ARadio } from 'ant-design-vue/lib/radio'
import '@/assets/lib/ant-design-vue/lib/radio/style'

import { default as ATable } from 'ant-design-vue/lib/table'
import '@/assets/lib/ant-design-vue/lib/table/style'

import { default as APopover } from 'ant-design-vue/lib/popover'
import '@/assets/lib/ant-design-vue/lib/popover/style'

import { default as ATooltip } from 'ant-design-vue/lib/tooltip'
import '@/assets/lib/ant-design-vue/lib/tooltip/style'

import { default as ARate } from 'ant-design-vue/lib/rate'
import '@/assets/lib/ant-design-vue/lib/rate/style'

import { default as ASpin } from 'ant-design-vue/lib/spin'
import '@/assets/lib/ant-design-vue/lib/spin/style'

import { default as ADivider } from 'ant-design-vue/lib/divider'
import '@/assets/lib/ant-design-vue/lib/divider/style'

Vue.use(ALayout)
Vue.use(ARow)
Vue.use(ACol)
Vue.use(AButton)
Vue.use(AMenu)
Vue.use(AIcon)
Vue.use(AForm)
Vue.use(ASelect)
Vue.use(AInput)
Vue.use(AInputNumber)
Vue.use(ACheckbox)
Vue.use(ARadio)
Vue.use(ATable)
Vue.use(APopover)
Vue.use(ATooltip)
Vue.use(ARate)
Vue.use(ADivider)
Vue.use(ASpin)

RUN vue-cli-service build --report

What is expected?

How can I remove moment.js, lodash and select individual icons?

What is actually happening?

The bundle still import moment.js; lodash; (too large size) (see screen shot)

How can I remove moment.js, lodash and select individual icons?

[tuantmtb]

I fixed!

• Import component individual -> Use Use babel-plugin-import (https://antdv.com/docs/vue/introduce/#Use-modularized-antd)
• Replace momentjs by dayjs -> https://github.com/ant-design/antd-dayjs-webpack-plugin
• Icon import individual -> https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo