Vue專案性能優化實戰總結，7個實用方法

你知道你的專案的首次加載時間需要多久嗎？你有給自己的專案做過性能優化嗎？

據統計53%的用戶不會等待超過3秒就會關閉掉網頁，所以對于專案的性能優化尤為的重要，

閑話少說，今天我們來詳細了解如何優化Vue專案的性能，

分析專案bundle大小

打包后的檔案大小直接影響我們訪問的加載速度，所以我們要知道哪些打包檔案存在性能問題，

查看bundle大小主要有兩種方法

report

使用webpack-bundle-analyzer來生成一個報告，可以清晰直觀的看出每個打包后檔案的大小

我們在Vue專案的package.json檔案中加入下面的命令

"build-report": "vue-cli-service build --report"

然后，在命令列中運行

npm run build-report

等待一段時間后，會在dist檔案中生成一個report.html檔案，我們在瀏覽器中打開它

build

在本地使用build打包命令

npm run build

然后看終端的輸出資訊

可以看到主要的檔案從大到小的排序

在查看完關鍵的資訊后，我們可以做一些優化手段

1. 懶加載模塊

比如Echarts圖示的包和編輯器的包，都是很大的有45百kb，但并不是所有的頁面都需要圖表和編輯器，只有少量頁面需要，所以我們可以把Echarts和編輯器放到需要的頁面中去加載，不要放到全域里面，這樣其他頁面就省去加載他們的時間，

要查看瀏覽器加載檔案的順序，我們打開瀏覽器的開發者工具，點擊Network，勾選上Disable cache，這樣不會從瀏覽器的快取中去加載檔案，然后重新去重繪頁面，可以看到所有檔案的加載順序

一般我引入模塊是這樣寫

// demo.js
const Demo = {
  testDemo: function () {
    console.log("這是DEMO")
  }
}
export default Demo

// app.js
import Demo from './demo.js'
Demo.testDemo()

使用懶加載這樣寫

// app.js
const getDemo = () => import('./demo.js')

// 延遲加載
getDemo()
  .then({ testDemo } => testDemo())

懶加載能夠非常好的解決bundle過大的問題，把一些用戶并不常用的功能放到懶加載里，當用戶點擊或者滾動可視區再進行加載，

2. 路由懶加載拆分

一般我們的路由可能這樣寫，這樣寫在打包時把Dashboard組件和Contact組件的代碼全部打包到JS中，

// routing.js
import Dashboard from './Dashboard.vue'
import Contact from './Contact.vue'

const routes = [
  { path: '/', component: Dashboard }
  { path: '/contact', component: Contact }
]

我們可以按路由去懶加載，改成下面這樣

// routing.js 
const routes = [
  { path: '/', component: () => import('./Dashboard.vue') }
  { path: '/contact', component: () => import('./Contact.vue') }
]

這樣的好處就是，我們沒有訪問路由時/contact，就不會去加載Contact.vue的代碼，只有訪問到時才會去加載組件的代碼，

通過webpackChunkName來聚合打包多個頁面到一個bundle中

一般我們的一個頁面的bundle可能非常的小，我們可以把一個模塊的所有路由的頁面都打包到一個bundle中，在import函式加入/* webpackChunkName:'group-superAdmin' */，其中webpackChunkName的名稱需要自己定義，

const router = [
  {
    path: 'superAdminAccountList',
    name: 'SuperAdminAccountList',
    component: () => import(/* webpackChunkName:'group-superAdmin' */ '@/activity/superAdmin/AccountList'),
  },
  {
    path: 'superAdminCreateAccount',
    name: 'SuperAdminCreateAccount',
    component: () => import(/* webpackChunkName:'group-superAdmin' */ '@/activity/superAdmin/CreateAccount'),
  },
  {
    path: 'superAdminRoleList',
    name: 'SuperAdminRoleList',
    component: () => import(/* webpackChunkName:'group-superAdmin' */ '@/activity/superAdmin/RoleList'),
  },
  {
    path: 'superAdminCreateRole/:id?/:look?',
    name: 'SuperAdminCreateRole',
    component: () => import(/* webpackChunkName:'group-superAdmin' */ '@/activity/superAdmin/CreateRole'),
  },
];

3. prefetch預渲染組件

prefetch是一種利用瀏覽器的空閑時間加載頁面將來可能用到的資源的一種機制；通常可以用于加載非首頁的其他頁面所需要的資源，以便加快后續頁面的首屏速度；

通過webpack我們可以非常方便的實作組件的預渲染，通過加入/* webpackPrefetch: true */，webpack會自動在頁面中加入** 的標簽，

components: {
  ModalView: () => import(/* webpackPrefetch: true */ './ModalView.vue')
}

4. 優化三方庫依賴

一般我們在專案中都會用到一些三方的依賴庫，比如lodash

如果我們全量的引入的話會很大，但我們可能只用到一兩個函式，我們只需要參考我們需要的就好

import isEmpty from 'lodash/isEmpty`

5. 善用瀏覽器快取

我們都知道我們訪問一個網站后，瀏覽器會對JS和CSS去進行快取，在下次訪問的時候會從快取中去獲取檔案，不用再去請求，你可能會問瀏覽器快取我們也控制不了？我們怎么做呢？

一般我們打包后的檔案像這樣

• main.[hash].js – 根組件
• common.[hash].js – 公共組件
• dashboard.[hash].js – dashboard頁面
• contact.[hash].js – contact頁面

其實我們可以把一些很長時間都不需要的公共代碼依賴放到common.[hash].js中，這樣一次快取后，以后再次訪問就不會去發請求，

6. 優化壓縮圖片

圖片的大小對于專案的性能也至關重要，一般webpack會幫助我們把小的圖片直接轉為base64來減少網路請求，對其他圖片來說我們也要進行壓縮，一般壓縮方式有兩種

1. 使用軟體進行壓縮
2. 使用CDN進行檔案壓縮

使用軟體壓縮我推薦使用TinyPNG，一個在線網站，使用它壓縮幾乎不損失清晰度而且壓縮效果特別好，

使用CDN壓縮，一般專業的檔案存盤都會提供圖片的處理功能比如京東的圖片地址，中間的s280x280可以去修改圖片寬高，后面的.webp后綴把jpg圖片轉換成webp格式，進一步的來縮小檔案的大小，

https://img30.360buyimg.com/seckillcms/s280x280_jfs/t1/187871/40/5785/69529/60b4af7dE5a50eaff/c235bb87f19c1698.jpg.webp

7. 靜態檔案上CDN

一般小公司可能為了方便直接把CSS、JS、圖片等檔案直接傳到服務器上進行訪問，使用CDN的優勢在于CDN時全國的各個地方都會有服務節點，而且CDN也會快取檔案，所以通過CDN訪問靜態檔案和直接訪問服務器檔案要快上幾倍，

淘寶的圖片訪問，有98%的流量都走了CDN快取，只有2%會回源到源站，節省了大量的服務器資源，

總結

通過上面的一波操作，我們的專案首屏加載和淘寶京東網站幾乎差不多了，還有其他更多優化辦法，歡迎您再評論區告訴我，我們相互學習，

如果本文有幫助，微信搜索【小帥的編程筆記】，每天一個小知識