懶加載

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)
});
複製代碼