Vue asynchronously lazily loads third-party components

description:

 : vue-awesome-swiper

: 

    import "swiper/dist/css/swiper.css"
    import { swiper, swiperSlide } from "vue-awesome-swiper"
    
   components  swiperswiperSlide  template;

everything is fine; however: found that the introduction of this third-party swiper package during packaging greatly increased the volume of the total package.

and vue official ide/components-dynamic-async.html-sharp%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6" rel=" nofollow noreferrer "> link description


: resolve => {require(["vue-awesome-swiper"], resolve)},//

:
    components: {
       swiper : resolve => {require(["vue-awesome-swiper"], resolve)},//
   },

then the question arises: how can I parse {swiper, swiperSlide} from the module?

{ swiper : resolve => {require(['vue-awesome-swiper'], ({swiper}) => resolve(swiper))}, swiperSlide: resolve => {require(['vue-awesome-swiper'], ({swiperSlide}) => resolve (swiperSlide))}, }