懒加载

1、什么是懒加载

懒加载也叫延迟加载，即在须要的时候进行加载，随用随载。
复制代码

二 、为何须要懒加载

在单页应用中，若是没有应用懒加载，运用webpack打包后的文件将会异常的大，形成进入首页时，须要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则能够将页面进行划分，须要的时候加载页面，能够有效的分担首页所承担的加载压力，减小首页加载用时
复制代码

3、如何与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"]
}
复制代码

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

 （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)
});
复制代码