Vue.js——按需加载（异步组件）

前言
如果仔细观察浏览器加载Vue-Cli项目的时候，默认情况下，只会加载app.js文件，即所有文件都是在app.js文件中，然后浏览器读取app.js进行加载，所以如果项目很大，这种加载方式显然是影响用户体验。那么这时候就要通过按需加载的方式来异步加载组件，从而达到分割代码的作用。

常规的加载方式

常规或者新手在Vue-Cli项目中引入组件，都是如下：

import component from 'component.vue'

浏览器的加载方式：

即只加载一次app.js文件

按需加载

按需加载有两种方式:

• 方式一：

const component = r => require.ensure([],() => r(require("../page/component ")),"component ")

• 方式二：

const component = () => import('component')

两种方式的区别在于，前者会在打包的时候，会根据ensure()方法中的第三个参数的值，打包对应名称的chunk，起到一个打包后识别的作用。而后者就对代码进行分割异步加载组件，不会生成指定名称的chunk，chunk的名称都是随机的。

按需加载后，浏览器读取文件：

即将原先的app.js文件分割成多个.js文件进行异步加载，这种加载方式，在项目较大的情况下，会很明显的提高页面的加载速度。