运用Webpack 的代码分割功能：“webpack”: “^1.14.0”

Vue.component('async-webpack-example', function (resolve) {
  // 这个特殊的 require 语法告诉 webpack
  // 自动将编译后的代码分割成不同的块，
  // 这些块将通过 Ajax 请求自动下载。
  require(['./my-async-component'], resolve)
})

当你的组件是使用export default 申明时：

export default {
  name: 'component-name',
  data: function () {
    return {
      //...
    }
  },
  render (h) {
    //...
  }
}

这样会有问题，resolve函数的参数会是{default:组件object}

解决办法

1、修改解析方式

Vue.component('async-webpack-example', function (resolve) {
  // 这个特殊的 require 语法告诉 webpack
  // 自动将编译后的代码分割成不同的块，
  // 这些块将通过 Ajax 请求自动下载。
  require(['./my-async-component'], (d)=>resolve(d.default))
})

2、修改组建声明方式

module.exports = {
  name: 'component-name',
  data: function () {
    return {
      //...
    }
  },
  render (h) {
    //...
  }
}

3、webpack2.0有个System.import(),没试过

总结

感觉像是webpack的代码分割异步加载的问题，因为直接 采用非异步的方式 import 组件是没有 问题的。 不要乱用import / export 呀~；