在Vue项目上使用异步加载

在Vue项目上使用异步加载

以SPA的方式构建应用，往往会把所有的代码打包到一起，使得单个js日益庞大。所以我们需要思考一些暂时不用的代码是否可以异步加载，而Vue也提供了这样的能力。

一、使用异步组件

Vue允许以一个工厂函数的方式定义组件，这个工厂函数会收到一个 resolve 回调，这个回调函数会在你从服务器得到组件定义的时候被调用。你也可以调用 reject(reason) 来表示加载失败。这里的 setTimeout 是为了演示用的，如何获取组件取决于你自己。

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
     // 一些耗时任务
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: '
I am async!
'
    })
  }, 1000)
})

显然以上示例几乎看不出来什么场景需要使用。但这却是使用异步加载的基石。假如我们把setTimeout换成以下这种：

Vue.component('async-example', function (resolve, reject) {
  import('path-to-my-component.js').then(component => resolve(component))
    .catch(reject)
})

这是不是就是我们想要的吗？这里用到了处于stage 3的dynamic import。

Dynamic import() introduces a new function-like form of import that unlocks new capabilities compared to static import.

Dynamic import()现在处于stage 3阶段，相对于import的静态处理方式，import()以一种函数调用的方式来更灵活地加载模块。

二、跟webpack结合

webpack的动态导入也能帮我们解决这个问题。它提供了两个方法：

import()

使用import()动态导入foo，（这里跟dynamic import几乎一样，可以认为是webpack自己的polyfill）

Vue.component('async-component', (resolve) => import('./foo.js')
.then(resolve)
) // import 返回一个promise

Require

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

三、在路由层面懒加载

vue-router文档有一节来讲路由懒加载。不过使用的也是上面描述的几种方法，可以对照着看一看。

四、webpack如何实现懒加载

假设我们有如下的代码：

// index.js
const routes = [
    { path: '/foo', component: () => import('./foo') },
    { path: '/bar', component: Bar }
]

// foo.js
export default {
  template: "
Template Foo
"
}

我们使用下面的配置打包：

module.exports = {
  entry: './index.js',
  output: {
    filename: '[name].bundle.js',
    chunkFilename: "[name].bundle.js",
    path: __dirname
  }
}

打包出来的代码：

// 1.bundle.js 对应 foo.js
(window.webpackJsonp = window.webpackJsonp || []).push([
  [1],
  [, function (e, o, p) {
    "use strict";
    p.r(o), o.default = {
      template: "
Template Foo
"
    }
  }]
]);

可以看到foo.js单独打包成了1.bundle.js，加载它的时候，会把代码以函数的方式挂载在window的webpackJsonp属性上。

另外查看main.bundle.js,可以找到它以创建一个script标签的形式引入1.bundle.js，另外使用onload执行代码。

main.bundle.js