vue+webpack实现页面的按需加载

通过vue写的单页应用时，可能会有很多的路由引入。就像图片的懒加载一样，如果客户根本就没有看到那些图片，而我们却在打开页面的时候全部给加载完了，这样会大大的增加请求的时间，降低用户的体验程度。懒加载在很多的网站都有用到，比如淘宝、京东等等这样的购物网站，上面的图片链接等等都很多，如果你把滚轴迅速的往下拉的时候，你可能会看到图片加载的情况。

单页应用也是一样，用户可能没有通过点击跳转到其他的的页面，而是只在主页面进行了停留，那么我们就没有必要把其他页面的资源全部加载过来。如果用户点进去再加载。这样就可以大大提高请求时间，提高用户的体验程度。

webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入，改为const定义的方式进行引入。

不进行页面按需加载引入方式：import home from '../../common/home.vue'

进行页面按需加载的引入方式：const home = r => require.ensure( [], () => r (require('../../common/home.vue')))

vue项目优化，还有通过减少向服务器请求的次数来减少等待的时间。比如，一个页面的数据包括图片、文字等用户都已经加载完了，然后用户通过点击跳转到了另外一个界面。然后从另外一个界面通过返回又回到了原先的界面。如果没有设置的话，那么原先界面的信息就要重新向服务器请求得到。而通过vue提供的keep-alive可以是页面的已经请求的数据得以保存，减少请求的次数，提高用户的体验程度。具体怎么使用，大家可以看我写的另外一个博客: vue项目优化之通过keep-alive数据缓存(vue+webpack)