VUE系列加载优化-页面首屏加载优化之异步加载组件

异步加载组件的含义

在大型应用中，我们可能需要将应用分割成小一些的代码块，如果页面首屏加载时同时加载所有的代码块，会造成页面加载很慢很慢。异步加载组件则可提升页面首屏加载的速度。异步加载组件就是在定义组件的时候什么都不做，页面首屏加载时不对异步加载的组件进行加载和渲染，只有当组件第一次使用的时候才进行加载和渲染，适用于当页面首屏加载时隐藏的组件。

实现方式

1、webpack代码分割。

    component：resolve => require(['@/component/helloworld'],resolve);
    （@指组件的相对路径，要看你webpack是怎么配置的）
    这里的require是AMD规范的引入关键词，resolve是全部引入成功以后的回调函数，第一个参数是依赖， require会先引入依赖模块，再执行回调函数。

2、webpack2+es6。
使用() => import()，需要syntax-dynamic-import插件
代码块1

    component：() => import('./component/helloworld')；

   // import函数是es6里面的新方法，主要是进行异步加载的，返回一个promise对象。import()函数不能传入变量，需要拼接一个静态的字符串**''**，c才能正确加载模块路径，

代码块2

 const AsyncComponent1 = () => ({
    // 需要加载的组件 (应该是一个 `Promise` 对象)
    component: import('./Add.vue'),
    // 异步组件加载时使用的组件
    loading: loading,
    // 加载失败时使用的组件
    error: '',
    // 展示加载时组件的延时时间。默认值是 200 (毫秒)
    delay: 200,
    // 如果提供了超时时间且组件加载也超时了，
    // 则使用加载失败时使用的组件。默认值是：`Infinity`
    timeout: 3000
  })
 const  AsyncComponent2 =  () => import('./component/helloworld')；
 export default {
    components: {
      AsyncComponent1,
      AsyncComponent2
     }
 },

3、webpack另一种代码分割。

   component： r => require.ensure([], () => r(require('./helloworld.vue')), 'group-foo')