vue异步加载css,Vue中的异步路由、异步组件、懒加载第三方类库

网上说这块的很多,但是没看到有一篇能说全的。这里就说说怎么通过异步和懒加载的形式把首屏代码实现到最小。

注意:首屏的代码不要异步加载,非首屏代码异步加载。不然初始代码加载完成后,还有等运行后再去加载首屏代码,反而拉慢首屏显示。

一、现在异步组件最常见的技术用两种。

1、依赖require

const Editor = resolve => require(['@/views/Editor'], resolve)

2、webpack 2 + ES6

const Editor = () => import('@/views/Editor')

二、下面使用require来实现异步加载

1、异步路由

import indexPage from '@/views/indexPage';

export default new Router({

routes: [

{

path: '/index',

name: '主页',

component: indexPage // 首屏代码不要异步加载

},

{

path: '/comment/:iid',

name: '评论',

component: resolve => require(['@/views/Editor'], resolve) // 异步加载非首屏页面

},

],

})

2、全局异步组件

可以同时require组件的css,只需要最后resolve传参的是组件

// main.js

Vue.component('swiper', (resolve) => require(['vue-awesome-swiper', 'swiper/dist/css/swiper.css'], ({swiper}) => resolve(swiper)))

3、单个组件内的异步组件

export default {

name: 'editor',

components: {

appBox: resolve => require(['@/components/layout'], resolve)

},

...

}

4、懒加载第三方类库

项目中会用到一些第三方类库,如果类库比较大,而且可以不用第一时间处理,则可以考虑把它懒加载,来加速页面的响应速度

require(['lrz'], (lrz) => {

lrz(fileInfo, {fieldName: 'imgTp', width: 960, quality: 0.6})

.then((rst) => {

})

.catch((err) => {

console.log(err);

})

})

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值