Vue中的項目優化

  對於vue的性能，其自己已經至關OK啦！如今我會針對如下幾個方面對Vue中的項目優化進行簡單的總結。固然也僅僅是幾個小小的注意點哦！

1、書寫習慣

1，不須要作響應式的數據，不要放在data中

  響應式數據：每一個Vue實例都會代理其data對象裏全部的屬性，只有這些被代理的數據是響應式的，在其數據改變時視圖也會隨之更新。
  在每一個vue組件中都有一個data對象。不要把全部數據都放在data中，只把須要作響應式的數據放在data對象中；緣由是：若是一個數據存在於data中，數據會被劫持，vue會給數據添加一個getter（獲取數據），一個setter（設置數據），性能不會高。

2，在模板裏不要寫太多表達式

v-if="isShow && isAdmin && (a || b) "
{{haorooms?haorooms:(resource?resource:"haoroomsresource")}}
複製代碼

  在如上的表達式中，雖然沒有出現語法或其它錯誤，可是當表達式過多時，可經過其餘方式，例如能夠經過methods 或computed 封裝方法。
  用方法的好處是方便咱們在多處判斷相同的表達式，其餘權限相同的元素再判斷展現的時候調用同一個方法便可。

3，能拆分的組件儘可能拆分

  將可以拆分組件儘量拆分可以使得顆粒度儘量的小，其優勢在於有利於提升利用性，增長代碼的可維護性，減少沒必要要的渲染

4,SPA(Single Page Application)

  SPA(Single Page Application)也就指的是單頁，它是利用vue或者react寫的，經過js代碼寫的路由來實現，將不一樣的組件扔到app裏面。
  其特色以下：
  （1）當它被打包完以後在index.html中只存在一行代碼

<div id="app"></div>
複製代碼

  （2）雖然打包後只有一行代碼，但仍然能渲染出頁面，是由於內容是經過加載js代碼，而後經過webpack打包插入到div中的。
  （3）單頁不利於SEO（搜索引擎優化），由於路由是動態加載的，當不使用路由時，div標籤中是啥都沒有的，不利於爬蟲（利用SSR服務器渲染解決）
  （4）keep-alive組件，它能夠實現組件的緩存，把組件中的結構和數據所有緩存到內存

5，v-if和v-show區別與聯繫

  v-show控制的是display，無論顯示與否都是會渲染的；v-if如果不顯示根本就不會渲染。注意點：v-show一個組件，可讓組件從新渲染，經過v-if，咱們可讓組件按照必定執行循序執行。
  結論：能使用v-if的時候儘可能使用v-if；頻繁讓組件顯示或隱藏使用v-show；不頻繁讓組件顯示或隱藏使用v-if。

6，循環調用子組件時添加key

  在循環調用子組件時，使用到v-for，必須加上key，不然編輯器會出現警告！通常來講，循環key最好是不要使用index做爲key，儘可能使用id做爲key。使用id做爲key能夠避免重複渲染。
  vue是虛擬DOM，最終渲染時仍是要求找到真實DOM。瀏覽器是真實DOM，在加上key後，當DOM樹上的節點發生改變時，能夠迅速定位到那裏，不然須要對其進行遍歷

7，儘可能不使用 float 佈局

  儘可能不要使用float佈局，儘量的去使用flex或者grid佈局。

8，Object.freeze做用

  Object.freeze會實現數據劫持，進行凍結；當頁面上的數據不想常常改變時，能夠進行凍結，再也不使用getter和setter。
  Object.freeze()能夠去除Observer監聽，對於長期不變的大數據，去除監聽，利用Object.freeze方法改變數據時，視圖也會更新（改變數據、改變Dom）

  因此雖然Object.freeze能夠取消監聽，可是仍是能夠改變數值、改變DOM，而且當給list數據從新賦值以後，又恢復了監聽。

9，vue-router路由優化

  路由懶加載能夠實現路由的優化

import home from "./views/home"直接在組件中引入完畢，而後使用該組件
  ()=>import("./views/user") 
複製代碼

10，動態導入組件

  爲項目優化，將組件可以使用require或者import按需導入

原始導入：
    導入：import home from "./component/home"
    註冊：component：{home}
  動態導入：components:{home:()=>import("./component/home")}
複製代碼

11，vue中使用run time

  Runtime + Compiler意思是運行時+編譯器，是不在打包時進行編譯，是在瀏覽器（客戶端）運行時進行編譯的，因此須要使用帶編譯器的完整版本。
  Runtime-only意思是隻包含運行時版本，是在構建時經過webpack的 vue-loader工具將模板預編譯成JavaScript，也就是進行了預編譯，在最終打好的包裏其實是已經編譯好的，在瀏覽器中可直接運行。

2、加載

1，圖片的懶加載

  並不是在一開始就將圖片加載完成，而是在用到的時候再去請求數據，從而加載出來圖片。

2，第三方模塊按需導入

  根據第三方模塊網站說明的使用方法來引入模塊，須要的話可能還要在webpack中進行配置。

3、提高用戶體驗

1，骨架屏

  數據加載loading完成以前存在着虛框，就好像數據要請求回來同樣；當數據請求回來之後骨架屏也就不存在啦！骨架屏利用的是第三方模塊vue-skeleton-webpack-plugin，對模塊更爲詳細的瞭解，查看
www.npmjs.com/package/vue…

2,PWA

  PWA是用來作緩存的，以提高用戶體驗，通常網頁只能使用電腦打開，但經過PWA可用手機打開。
  在弱網的狀況下（2G,3G），須要PWA進行緩存，現將本來緩存的數據顯示出來，等加載完畢再用新數據來替換本來緩存過的舊數據。

3，shell

  作一個網站，本質上是一個頁面，經過瀏覽器打開，想要使其像傳統 app同樣，能夠下載，安裝，上傳到用戶商店。加上shell這樣一個殼以後，它本質上跑的仍是H5，不過能夠下載，安裝，性能與原生APP來相比較的話，沒有原生的好。

4、SEO搜索引擎優化

1，預渲染

  在最初時，經過html代碼，使用axios去請求數據，而後再渲染；網絡很差的時候可能會出現白屏。預渲染是在真實數據請求回來以前。已渲染出數據（死數據），而當請求回來正式數據以後再將其替換

2，SSR服務端渲染

  SSR服務端渲染可解決SEO（搜索引擎優化），由於SEO爬蟲在爬取頁面信息的時候，會發送 HTTP請求來獲取網頁內容，而咱們SSR服務端渲染首次的數據是後端返回的，返回的時候已是渲染好了內容等信息，便於爬蟲抓取內容。

5、從前端角度來優化

  從後端來說，也就有兩大塊：瀏覽器的緩存和壓縮，更爲詳細的分析以下：

1，瀏覽器緩存

1，HTTP緩存機制

• 緩存分類
  （1）200 from cache：直接從本地緩存中獲取響應，最快速，最省流量，由於根本沒有向服務器發送請求；
  （2）304 NOT Modified：協商緩存，瀏覽器在本地沒有緩存的狀況，請求頭髮送必定的校檢數據到服務端，若是服務端數據沒有改變瀏覽器從本地緩存響應，返回304快速，發送的數據不多，只返回一些基本的響應頭信息，數據量很小，不發送實際的響應體；
  （3）200 OK：以上兩種緩存失敗，服務器返回完整的響應。沒有用到緩存，相對較慢；
• 相關的頭信息：
  （1） Pragma：HTTP1.0時代遺留的產物，該字段被設置no-cache時，會告知瀏覽器禁用本地緩存，即每次都要向服務器發送請求；
  （2）Expires：HTTP1.0時代啓用本地的緩存，告訴瀏覽器緩存實現的時刻，若是沒有到該時刻，標明緩存有效，無需發送請求；（瀏覽器和服務器的時間沒法保持一致，若是時間差距太大，就回影響緩存效果）；
  （3）Cache-control：HTTP1.1針對Expires時間不一致的解決方案，告知瀏覽器緩存過時時間不是時間間隔而是秒，這樣就會解決時間不一致的問題；
  （4）no-store：禁止瀏覽器緩存響應
  （5）no-cache：不容許直接使用緩存，先發起請求和服務器協商
  （6）max-age=單位：秒，告知瀏覽器該響應本地緩存有效的最大期限，以秒爲單位；
  以上優先級比較：Pragma > cache-control > Expires
  （1）Last-modified：通知瀏覽器資源最後的修改時間
  （2）if-Modified-Since：獲得資源最後的修改時間，會將這個信息提交到服務器作檢查，若是沒有修改，返回304狀態碼；
  （3）Etag：HTTP1.1推出，文件指紋標識符，若是文件內容修改指紋會改變；
  （4）if-None-Match：本地緩存失效，會攜帶此值去請求服務器，服務器判斷該資源是否改變，若是沒有改變，直接使用本地緩存，返回304；
  更爲詳細的頭的相關信息請查詢網絡，或也可看我寫的《網絡相關總結》這篇文章。網址於：juejin.im/post/5d97ef… 文章中應該有較爲詳細或易於理解的內容。
• HTTP緩存策略：
  1）適合作本地緩存：
   （1）不變的圖像，如logo，圖標等；
   （2）js、css靜態文件；
   （3）可下載的內容，媒體文件；
  2）適合作協商緩存：
   （1）HTML文件；
   （2）常常替換的圖片；
   （3）常常修改的js、css文件；
   （4）js、css文件的加載能夠加入文件的簽名來拒絕緩存；
  3）不建議緩存的內容：
   （1）用戶隱私等敏感的信息；
   （2）常常改變的api數據接口；

2，Nginx配置緩存策略

• 本地緩存配置：
  （1） expires time：通知瀏覽器過時的時長。當其爲負值時表示Cache-Control：no-cache；爲正值或者爲0，就表示Cache-Control：max-age=指定的時間

• 協商緩存：
  （1） Etag：指定簽名 on|off 默認開啓

2，瀏覽器的壓縮

  壓縮優點：讓資源文件更小，加快文件在網絡的傳輸，讓網頁更快的展示，下降帶寬和流量的開銷；
  壓縮方式：js、css、圖片、html的代碼壓縮、gzip壓縮。
  （1）js代碼壓縮：通常就是去除多餘的空格和回車、替換長變量名、簡化一些代碼寫法等；其經常使用的壓縮工具：UglifyJS（壓縮、語法檢查、美化代碼、代碼縮減、轉化）、YUI Compressor（只有壓縮）、Closure（和UglifyJS相似，壓縮方式不同）、Compiler。
  （2）css壓縮：去除空白符、註釋優化一些css語義規則；其經常使用的壓縮工具：YUI Compressor（只有壓縮）、CSS Compressor。
  （3）HTML壓縮：不建議使用代碼壓縮，建議使用gzip壓縮，其圖片壓縮工具：tinypng、jepgMini、ImageOptim
  （4）gzip壓縮：它最終的須要在Nginx中配置壓縮文件
  Nginx配置以下：更爲具體的能夠在/etc/nginx/mime.types 中查看nginx支持的靜態文件壓縮類型。

gzip on|off;#是否開啓gzip
gzip_min_length 1k;#開始壓縮的最小長度
gzip_buffers 32 4k|16 8k;# 緩衝（在內存中緩存幾塊？每塊多大）
gzip_comp_level[1-9]#推薦2 壓縮級別（級別越高，壓的越小，越浪費CPU計算資源）
gzip_http_version 1.0|1.1;#開始壓縮的HTTP協議版本
gzip_disable #正則匹配UA 什麼樣的URI不進行gzip
gzip_proxied  #設置請求者代理服務器，該如何緩存內容
gzip_types text/plain application/javascript application/x-javascript 
text/css application/xml text/javascript application/x-httpd-php image/x-icon;
#對哪些類型的文件使用壓縮，如txt，xml，html，css其中通常不壓縮圖片，image/jpeg image/gif image/png壓縮反而更大
gzip_vary on|off #是否傳輸gzip壓縮標誌
複製代碼