加载vue文件步骤_Vue按需加载组件

## Vue 项目的编译打包

使用Vue Cli创建的项目， 在正式环境时需要使用webpack编译打包，编译的命令是：

```

npm run build

```

以上命令做的事情是把很多js源码文件中的注释去掉， 汇整到一份文件中， 这样的好处是总体需要传输的文件变小了。

打包后的路径是： dist\js 。 文件名是 app_[一段Hash字符串].js。

## 问题导入

在使用Router的项目中, router/index.js 路由中一般会导入多个 .vue 组件， 类似：

```

import VuexDemo from '../views/VuexDemo.vue'

```

当一个应用中的组件很多时， 会导致打包后的 app.xxx.js 这个文件很大，多的甚至达到几十兆，这样导致的问题是：

首页的加载会很慢，虽然后面很快，但是用户一般是等不及进首页就要抱怨了。

而且在很多应用中， 不同的页面关注的功能不同， 有点页面压根不会进去， 这样一次性把所有内容传递过来就显得浪费了。

## 解决方法

解决的方案是： 分模块打包。

这里有一个名词：chunk , 块，文件束。

实现方式是使用webpack 的require.ensure 方法实现按需加载。

语法如下：

```

require.ensure(dependencies: String[], callback: function(require), chunkName: String)

```

* dependencies， 依赖，需要用到的组件

* callback， 回调 ， 所有依赖加载完，执行这个回调函数。可以为null

* chunkName, 分块的名字

## 原理

webpack 会创建一个 `

## Vue 路由懒加载

结合Vue的异步组件和Webpack 的代码分隔功能，实现路由组件的懒加载。

1. 异步组件

```

new Vue({

// ...

components: {

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

}

})

```

```

const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

```

2. 动带import

```

import('./Foo.vue') // 返回 Promise

```

结合以上两点， 定义一个能够被Webpack自动代码分隔的异步组件的方式是：

```

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

```