vue 路由懶加載 使用，優化對比

　　vue這種單頁面應用，如果沒有應用懶加載，運用webpack打包后的文件將會異常的大，造成進入首頁時，需要加載的內容過多，時間過長，會出啊先長時間的白屏，即使做了loading也是不利於用戶體驗，而運用懶加載則可以將頁面進行划分，需要的時候加載頁面，可以有效的分擔首頁所承擔的加載壓力，減少首頁加載用時。

簡單的說就是：進入首頁不用一次加載過多資源造成用時過長！ 如何實現？

------------------正常用法
// import Login from 'login/Login'
// import LoginView from 'login/index.vue'
// import SelectCountry from 'login/children/SelectCountry'
// import OpenView from 'login/open/Index.vue'
// import OpenViewTwo from 'login/open/Two.vue'
// import OpenViewThree from 'login/open/Three.vue'
// import OpenViewFour from 'login/open/Four.vue'
// import OpenViewFive from 'login/open/Five.vue'
// import OpenViewSix from 'login/open/Six.vue'
// import OpenViewSeven from 'login/open/Seven.vue'

-------------------懶加載用法

const Login = r => require.ensure([], () => r(require('login/Login')), 'group-login')
const LoginView = r => require.ensure([], () => r(require('login/index')), 'group-login')
const SelectCountry = r => require.ensure([], () => r(require('login/children/SelectCountry')), 'group-login')
const OpenView = r => require.ensure([], () => r(require('login/open/Index.vue')), 'group-login')
const OpenViewTwo = r => require.ensure([], () => r(require('login/open/Two.vue')), 'group-login')
const OpenViewThree = r => require.ensure([], () => r(require('login/open/Three.vue')), 'group-login')
const OpenViewFour = r => require.ensure([], () => r(require('login/open/Four.vue')), 'group-login')
const OpenViewFive = r => require.ensure([], () => r(require('login/open/Five.vue')), 'group-login')
const OpenViewSix = r => require.ensure([], () => r(require('login/open/Six.vue')), 'group-login')
const OpenViewSeven = r => require.ensure([], () => r(require('login/open/Seven.vue')), 'group-login')

 

 

小希項目 優化，路由模塊懶加載，目前測試環境已部署，線上等待部署

項目頁面加載對比

優化后頁面加載圖示：

優化后頁面加載圖示：

 

————————

頁面finish時間  目前是對比中  優化前加載時長比優化后加載時長短，因為對比時，0.25測試服務器帶寬慢，線上服務器帶寬快    原因所導致，部署線上后，就正常了

————————​​

項目打包對比

優化后打包圖示：

​​

優化前打包圖示：

​​