vue路由懒加载的原理

学习Vue的时候，各类教程都会告诉我们：Vue 的特点是SPA——Single Page Application（单页应用程序）。
它有着诸如：“只有第一次会加载页面, 以后的每次页面切换，只需要进行组件替换；减少了请求体积，加快页面响应速度，降低了对服务器的压力” 等等优点。
但是呢！因为Vue 是SPA，所以首页第一次加载时会把所有的组件以及组件相关的资源全都加载了。
这样就会导致首页加载时加载了许多首页用不上的资源，造成网站首页打开速度变慢的问题，降低用户体验。
为了解决上面问题，我们需要对Vue实现组件懒加载（按需加载）。

而vue中的路由懒加载其实是利用了webpack的异步加载的方法。

我们都知道webpack会整合所有的资源，将其打入一个包内。但是要实现懒加载，我们肯定不能让子组件被整合进一个包里头。所以需要解决的问题就是如何将子组件单独打包成一个文件，在我们需要用到他的时候去加载。

首先解决第一个问题，如何将子组件打包成一个单独的文件。

在webpack中提供了一个import方法给我们，注意是方法，而不是我们经常使用的那个import。

正常的引入文件我们会这样做

import {sum} from './js/count'  //同步加载

而这样的写法就是大家所说的同步引入，他是会被打进一个文件内的。
使用import方法，就可以做到异步引入，从而使被引入的文件单独被打包

import(/* webpackChunkName: "count" */  './js/count')

这样就会使这个count.js被单独打包成一个文件了

image.png

被单独打包的文件默认会使用文件的路径作为文件名。

/* webpackChunkName: "count" */这一行注释就是为了修改打包出来的文件名的 count就是文件名。
在webpack配置中我们还需要这样写

    output: {
        //所有文件的输出路径
        //__dirname: nodejs的变量，代表当前文件的文件夹目录
        path: path.resolve(__dirname, "dist"),//绝对路径
        //文件名
        filename: "bundle.js",
        //代码块的文件名
        chunkFilename:"[name].chunk.js",  这里的name就是上面的webpackChunkName
        clean:true //自动删除上次打包的结果
    },

这样我们就实现了一个将文件单独打包的功能。

当然离懒加载还差一点。
虽然上文中我们做到了异步加载，并且也将文件单独打包了，但是如果单纯这样做的话资源还是会被一起加载。细心的同学可能已经发现了，在vue中我们通常会给需要懒加载的路由这样写

() => import(/* webpackChunkName: "con" */ './xxx.vue')

没错，这里就是利用了函数只有被调用才会执行的特性。将组件的component属性赋值一个函数，在函数中去异步引入组件。这样才是一个完整的路由懒加载方案。

了解了这个之后其实就可以利用懒加载去对项目做很多优化了。