Vue-router(路由)的懒加载

1、为什么要使用懒加载

1、官方给的答案：

• 当打包构建应用时，javascript包会变的非常大，影响页面加载。
• 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更高效了。

2、按我们自己的理解就是：

• 路由中我们通常会定义很多不同的页面。
• 这些页面最后都会打包成一个js文件中。
• 这么多页面都放在这个js文件中的话，必然会造成这个js非常的大。
• 如果我们一次性的从服务器请求下来这个页面，可能需要一定的时间，甚至用户电脑上还会出现短暂的空白。

为了避免这种情况，使用路由的懒加载就可以了。

2、对比

首先我们来看一下使用了懒加载和没有使用打包生成文件的区别

2.1、使用了懒加载

6DF501B31C55F5293AF6472F9C9B4CEE.jpg

• app.开头的文件：我们自己书写的代码打包生成的js文件，出了组件之外还有我们的app.vue文件也需要打包的。
• manifest.开头的文件：对我们代码实现的底层支持文件。
• vendor.开头的文件：第三方的一些文件。

2.2、没有使用懒加载

46C32B2F23510BE18F50BBA01993360E.jpg

只会有三个js文件。

2.3、额外补充

我们在打包运行：npm run build，随后会生成一个dist文件夹

项目打包之后，代码都是经过压缩加密的，如果运行报错，输出的错误信息无法准确得知是哪里的代码报错。

有了.map文件就可以像未加密的代码一样，准确的输出是哪一行哪一列有错，但是.map文件通常比较大，如果不需要这个文件可以去掉

说白了，.map文件可以指出哪里报错。

在/config/index.js文件中可以配置，以便打包的时候不会生出.map文件。

配置以下代码就不会生出.map文件。

productionSourceMap:false

此时在进行打包的时候就不会生出.map文件。

3、懒加载的方式

3.1、结合Vue的异步组件和Webpack的代码分析

const Home  = resolve => {
  require.ensure(['../components/home.vue'], () => {
    resolve(require('../components/home.vue'))
  })
}

3.2、AMD写法

const Home  = resolve => require(['../components/home.vue'],resolve)

3.3、ES6写法

const Home = () =>import('../components/home.vue')