H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue 异步懒加载第三方组件

描述:

第三方包为 : vue-awesome-swiper

正常加载方式为: 

    import 'swiper/dist/css/swiper.css'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    
  然后再在 components 钩子中注册 swiper,swiperSlide ,这样才能在 template中正常调用;
  

一切很正常; 但是: 在打包的时候 发现引入的这个第三方swiper包大大增加了总包的体积,

现在需要将其优化为 懒加载

而 vue 官方 链接描述


提供的方式为: resolve => {require(['vue-awesome-swiper'], resolve)},//懒加载

例如:
    components: {
       swiper : resolve => {require(['vue-awesome-swiper'], resolve)},//懒加载
   },

那么问题来了 : 我怎样将 { swiper, swiperSlide } 都从模块中解析出来呢?

回答:

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

本文地址:H5W3 » vue 异步懒加载第三方组件

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址