Vue項目最佳化首屏載入速度

標籤：設定   require   官網   表示   com   one   vuex   lazy   div   

Vue項目部署上線後經常會發現首屏載入的速度特別慢：那麼有那寫能做的簡單最佳化呢

一、路由的懶載入

路由懶載入也就是 把不同路由對應的組件分割成不同的代碼塊，然後當路由被訪問的時候才載入對應組件。 
結合 Vue 的非同步裝置和 Webpack 的代碼分割功能，輕鬆實現路由群組件的懶載入。 
在router中，我們平時是這樣引入組件的：

import Foo from ‘./Foo.vue‘

文檔中指出，如下定義一個能夠被 Webpack 自動代碼分割的非同步裝置

const Foo = () => import(‘./Foo.vue‘)

在路由配置中什麼都不需要改變，只需要像往常一樣使用 Foo：

const router = new VueRouter({  routes: [    { path: ‘/foo‘, component: Foo }  ]})

官網介紹地址：

https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

二、使用cdn 

打包時，把vue、vuex、vue-router、axios等，換用國內的bootcdn直接引入到根目錄的index.html。 
在webpack build 下 base.conf.js 設定中添加externals，忽略不需要打包的庫。

module.exports = {  context: path.resolve(__dirname, ‘../‘),  entry: {    app: ‘./src/main.js‘  },  externals:{    ‘vue‘:‘Vue‘,    ‘vue-router‘:‘VueRouter‘,    ‘vuex‘:‘Vuex‘  },  // 格式為‘aaa‘:‘bbb‘，其中，aaa表示要引入的資源的名字，bbb表示該模組提供給外部參考的名字，由對應的庫自定。例如，vue為Vue，vue-router為VueRouter

去掉原有的引用直接使用就可以了，否則還是會打包

具體步驟為

（1）、引入

在這裡有些名字是不能變的，盡量按照規定的來寫

‘vue‘: ‘Vue‘,    ‘vuex‘: ‘Vuex‘,    ‘vue-router‘:‘VueRouter‘,    // ‘axios‘: ‘axios‘,    ‘element-ui‘: ‘ElementUI‘

2、引入cdn。推薦引入 百度靜態資源庫的

地址為：https://www.bootcdn.cn/

<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.0/theme-chalk/index.css" rel="stylesheet"><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.0/index.js"></script>

3、注釋

main.js中

// import Vue from ‘vue‘// import ELEMENT from ‘element-ui‘// Vue.use(ELEMENT)// import ElementUI from ‘element-ui‘// import ‘element-ui/lib/theme-chalk/index.css‘// Vue.use(ElementUI)

router.js中

// import Vue from ‘vue‘// import Router from ‘vue-router‘Vue.use(VueRouter)

use不能去在router中。

再就是vuex檔案中的注釋了

4、刪除掉 package.json 裡面原本引入的。

Vue項目最佳化首屏載入速度