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);

})

})