懒加载

一、什么是懒加载

  懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。

二 、为什么需要懒加载

  在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

三、如何与webpack配合实现组件懒加载

（1）、在webpack.config.js配置文件中的output路径配置chunkFilename属性

output: {
    path: resolve(__dirname, 'dist'),
    /*在webpack配置文件中的output路径配置chunkFilename属性*/
    filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
    chunkFilename: './src/chunk/chunk[id].js?[chunkhash]'
    /*chunkFilename路径将会作为组件懒加载的路径*/
}

（2）、配合webpack支持的异步加载方法 () => import(URL), webpack2官网推荐使用, 属于es7范畴, 需要配合babel的syntax-dynamic-import插件使用, 具体使用方法如下

（1）、安装syntax-dynamic-import插件

 cnpm install babel-plugin-syntax-dynamic-import

（2）.babelrc文件中

{
	"presets": [
		["es2015", { "modules": false }]
	],
	"plugins": ["syntax-dynamic-import"]
}

四、具体实例中实现懒加载

 （1）、路由中配置异步组件

const Body = () => import(/* webpackChunkName: "body"*/ './components/Body/Body.vue');
const Index = () => import(/* webpackChunkName: "body"*/ './components/Index/Index.vue');
const routes = [
  { path: '/Index', component: Index}
]
const router = new VueRouter({
  routes
})

new Vue({
  el: '#body',
  router:router,
  render: h => h(Body)
});