vue+webpack實現按需加載

webpack中提供了require.ensure()來實現按需加載。之前引入路由是經過import 這樣的方式引入，改成const定義的方式進行引入，在router的index.js的文件中，修改如下代碼實現按需加載
頁面非按需加載

import Home from './home.vue'

頁面按需加載

const Home = r => require.ensure([],() => r(require('@/views/home')),home)

經過vue寫的單頁面應用，會有不少頁面路由的注入，打包構建時，javascript體積會很是大，影響加載。若是把不一樣路由對應的組件分割成不一樣的代碼塊，只有當路由被訪問的時候才加載對應的組件，這樣會大大提升首屏顯示速度，可是可能其餘頁面的訪問速度會慢下來。相似於圖片懶加載，用戶在不看這張圖片就去所有加載下來，會增長請求時間，下降用戶體驗，下降訪問速度。單頁面應用也是同樣的，用戶可能沒有經過點擊去到其餘頁面，只是在主頁停留，就不必把全部頁面資源所有加載進來，若是用戶點擊再去加載，就大大下降了加載時間，提升請求速度和用戶體驗。