vue 的异步组件与路由懒加载

在一个 vue 单页面应用中，如果将所有的相关代码打包到一个 js 文件，通常这会导致 js 主文件过大，继而造成首页打开过慢的现象。在这种情况下，可以使用 vue 的异步组件与路由懒加载来进行首页打开速度优化。

异步组件，是指只有页面需要用到时才从服务器加载的组件。在 vue 中实现异步组件的方法不止一种。一个较为简单的方法是结合 webpack2 与 ES6 ，通过在工厂函数中返回一个 promise 来实现异步组件。具体代码如下：

 ……
  components: {
          'my-component': () => import('./my-async-component')
  }//注意这种代码需在 webpack 项目与支持 ES6 的环境中运行
  ……

路由懒加载就是将路由匹配的组件变为异步组件，代码与上方代码类似：

const Foo = () => import('./Foo.vue')

 const router = new VueRouter({
 routes: [
      { path: '/foo', component: Foo }
    ]
 })

有一点应该注意，如果项目中使用了 babel，那么你就要添加一个插件来保证 babel 正确解析这种语法。这个插件是 syntax-dynamic-import，具体安装命令是 ：

npm install babel-plugin-syntax-dynamic-import -D

安装后在 babel 的配置文件中添加 syntax-dynamic-import 插件就可以了。

异步.PNG

通过这两种方法，js 文件像上方图片一样被分离为多个文件，进而提高页面的加载速度。

Gwen Weustink 2016-03-02 09-53-30