webpack实现vue路由按需加载

        使用过vue.js开发的同行都知道vue实现的是单页应用，所以会有很多路由（页面）引入，再npm run bulid进行打包的时候，会让javascript包变得很庞大，严重影响加载的速度和用户使用的好感度。既然出现了问题，我们强大的互联网人才就一定能找出解决办法~

        相信很多人都知道图片懒加载，现在很多电商网站都在使用这种加载方式。比如我们逛淘宝的时候，在可视区域看到的图片得到加载，我们在下拉加载的时候，代表我们想去看下面的图片，这个时候才会去加载我们未看到的图片，这种有条件的加载方式就是懒加载，在我们需要看到图片的时候才会去加载。如果不采用这种方式的话，我们进入网站或者app的时候，浏览器将所有内容全部加载完，这样会增加请求时间，降低页面的加载速度。所以采用懒加载的方式去加载图片，在我们需要的时候去加载，不需要的时候不加载。同图片懒加载的原理一样，路由也有懒加载，当我们需要某个页面（路由）的时候，点击去加载这个页面，不需要就不加载。

        以前我们引入一个路由，都是采用import的方式：

import mine from '@/components/pages/mine.vue'

import home from '@/components/pages/home.vue'

import car from '@/components/pages/car.vue'

......

现在webpack给我们提供一种按需加载的方法：require.ensure(）

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

第一个参数为声明当前模块所以依赖的模块，它在回调函数加载前执行，第二个参数为所有模块加载完成后触发的回调函数，第三个为所声明的模块名

const mine = r = > require.ensure([],()=>r(require('../components/pages/mine.vue')),'mine');

const home = r = > require.ensure([],()=>r(require('../components/pages/home.vue')),'home');

const car = r => require.ensure([],()=>r(require('../components/pages/car.vue')),'car');

......

其中require()方法和const定义常量我们就不做解释了，不懂的可以自己去学习。我们主要来解释下webpack的ensure。ensure是按需加载里边最终要的一步，它就代表异步加载或者代码分割，其实它就是把js模块给导出成一个.js文件，当我们需要这个模块的时候，webpack会在dom结构中构造script标签，通过浏览器去异步请求这个.js文件。

我们注意到，require.ensure()方法的第一个参数为一个空数组[]，比如B模块需要A模块，那在加载B模块之前就要将A模块下载下来，我们也可以写成：

require.ensure(['./A.js'], function(require) {

        require('./B.js');

});

上面代码代表，将A、B模块打包到一起，但是只使用了A模块，并没有输出A模块，只有B模块被执行了，如果想让A执行，就使用require('./A.js')。

总结：

使用这种按需加载的方式去加载路由，会减少我们请求的时间，当我们进入页面或者app的时候，会将所有的模块都下载下来，但是并没有被执行加载，我们用到什么模块就加载什么模块。我也只是按照自己的理解记录下来，供自己以后学习看看~前端这个行业发展太快了，前端性能优化这个方面越来越重要，出现新的东西（这个已经不新了....），我们就要去学习，不然我们会很快被行业淘汰的~我发现光去浏览别人的笔记能记住的太少太浅了，我们最好养成自己做笔记的习惯~