Vue 异步加载组件

文章参考

1. VUE2组件懒加载浅析
2. VUE+Webpack 实现懒加载的三种方式
3. 路由懒加载

问题描述

在工作中，要实现一个‘打印’的功能，结果打印内容显示出来大概需要40秒。
由于我是做的单页面，代码打包之后大概有8M左右的样子，因此浏览器会先加载这8M的代码，然后根据逻辑和CSS渲染出需要打印的页面，对浏览器来说非常耗资源（CPU和内存），因此，采取的优化方式是对组件采用异步加载的方式

Vue异步加载组件API

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

全局注册加载组件 AMD规范

Vue.component('async-webpack-example', function (resolve) {
  // 这个特殊的 `require` 语法将会告诉 webpack
  // 自动将你的构建代码切割成多个包，这些包
  // 会通过 Ajax 请求加载
  require(['./my-async-component'], resolve)
})

全局注册加载组件 commonjs（CMD）写法

Vue.component(
  'async-webpack-example',
  // 这个 `import` 函数会返回一个 `Promise` 对象。
  () => import('./my-async-component')
)

局部注册加载组件

new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})

Vue官方写法

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export function createRouter () {
  return new Router({
    mode: 'history',
    routes: [
      { path: '/', component: () => import('./components/Home.vue') },
      { path: '/item/:id', component: () => import('./components/Item.vue') }
    ]
  })
}

commonjs写法

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export function createRouter () {
  return new Router({
    mode: 'history',
    routes: [
      { path: '/', component: resolve => require(['./components/Home.vue'],resolve) },
      { path: '/item/:id', component: resolve => require(['./components/Item.vue'],resolve) }
    ]
  })
}

使用建议

建议使用Vue官方推荐的使用方法，如果对第二种commonJS写法不理解，就需要了解Nodejs中require的用法