vuecli3首頁白屏優化

1、路由懶加載

在 router.js文件中，原來的靜態引用方式，如：

import ShowBlogs from '@/components/ShowBlogs'

routes:[ path: 'Blogs', name: 'ShowBlogs', component: ShowBlogs ]

改為：

 routes:[ 
 		path: 'Blogs',
 		name: 'ShowBlogs',
 		component: () => import('./components/ShowBlogs.vue')
 	]

如果是在 vuecli 3中，我們還需要多做一步工作
因為 vuecli 3默認開啟 prefetch(預先加載模塊)，提前獲取用戶未來可能會訪問的內容
在首屏會把這十幾個路由文件，都一口氣下載了
所以我們要關閉這個功能，在 vue.config.js中設置:

2、ui框架按需加載

這里以餓了么ui為例：
原本的引進方式引進了整個包：

import ElementUI from 'element-ui'
Vue.use(ElementUI)

但實際上我用到的組件只有按鈕，分頁，表格，輸入與警告
所以我們要按需引用：

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)
Vue.prototype.$alert = MessageBox.alert

注意 MessageBox注冊方法的區別，並且我們雖然用到了 alert，但並不需要引入 Alert組件

在 .babelrc / babel.config.js文件中添加（ vue-cli 3要先安裝 babel-plugin-component)：

plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]