vue.js如何使用异步组件。

Question

我按照官方示例撸了一下，代码如下：

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

发现会报出这个错：

'import' and 'export' may only appear at the top level 

是还需要设置一些其他的东西吗？望大神指点~~

Answer 1

<script>
    const MyAsyncComponent = () => import('./my-async-component')
    export default {
        components: {
            MyAsyncComponent
        }
    }
</script>

Answer 2

你这么实现没有任何意义，
1、import 导入的包不会立即执行，只有在使用的时候才会调用
2、构建程序需要打import引进的包，这么写会报错
3、import('./my-async-component')导入的包会全部装载到内存中，占用过多内存，假设里面有一些多余的东西。推荐使用import {something} form './my-async-component'

---

一般会在大型的应用为了节省空间，或者做首屏优化时才会使用异步组件，而且官方明确说明 Browserify 是无法使用的，推荐使用webpack

Answer 3

import不行试试require呢！
我记得在做router配置的时候，写过require
大致是这样的：

    {
        path: '/',
        meta: {
            title: 'SmkCRM登录页面'
        },
        component: (resolve) => require(['./views/login.vue'], resolve)
    }

不知道是不是你要的！