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

作者：Mr老朝
链接：https://www.jianshu.com/p/dca3e41753ab
来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网上说这块的很多，但是没看到有一篇能说全的。这里就说说怎么通过异步和懒加载的形式把首屏代码实现到最小。

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

一、现在异步组件最常见的技术用两种。
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);
    })
})