H5W3
当前位置:H5W3 > HTML5 > 正文

【前端】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

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