Vue 項目優化——首頁內容自定製，開發階段標題加上 dev - 前綴

路由懶加載：當路由被訪問時才加載對應的路由文件

當打包構建項目時，JavaScript包會變得非常大，影響頁面加載速度，如果我們能把不同路由對應的組件分割成不同的代碼塊，然後當路由被訪問的時候才加載對應的組件，這樣就更加高效了。

具體步驟如下：

1 安裝 @babel/plugin-syntax-dynamic-import

打開Vue可視化面板，點擊
依賴 -> 安裝依賴 -> 開發依賴 -> 搜索@babel/plugin-syntax-dynamic-import，點擊安裝。

2.在babel.config.js中聲明該插件

//項目發佈階段需要用到的babel插件
const productPlugins = []

//判斷是開發還是發佈階段
if(process.env.NODE_ENV === 'production'){
  //發佈階段
  productPlugins.push("transform-remove-console")
}

module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productPlugins,
    //配置路由懶加載插件
    "@babel/plugin-syntax-dynamic-import"
  ]
}

3.將路由更改爲按需加載的形式

打開router.js，更改組件引入方式

import Vue from 'vue'
import Router from 'vue-router'

// import Login from './components/Login.vue'
const Login = () => import(/* webpackChunkName:"login" */ './components/Login.vue')

// import Home from './components/Home.vue'
const Home = () => import(/* webpackChunkName:"home_welcome" */ './components/Home.vue')
// import Welcome from './components/Welcome.vue'
const Welcome = () => import(/* webpackChunkName:"home_welcome" */ './components/Welcome.vue')

註釋：
在import(/* webpackChunkName:"login" */ './components/Login.vue') 中,

• /*webpackChunkName:"login"*/ 表示分組
  打包時，會將名字相同的文件打包到同一個js中。當請求login組件時，只會加載Login組件及對應的js,當請求Home/Welcome組件時，會同時加載Home和Welcome組件及對應的js。所以我們可以適當將組件拆分爲不同的代碼塊，這樣即可達到懶加載的效果。
• ./components/Login.vue 路由路徑