小編這一期跟大家講一下關於優化vue效能相關的知識，vue眾所周知，是乙個輕量級的框架，原始碼僅僅為72.9kb，但是也有它自己的缺點，就是首屏載入會比較慢，因為和傳統專案相比，vue會在首屏載入的時候載入出所有的元件和外掛程式，並且向伺服器請求資料，導致可能有時候首屏載入的時間就會到4、5秒的樣子。
但是這樣做很明顯是在挑戰使用者的耐心，按照慣例，最好能把載入時間控制在1秒左右。接下來小編講一下vue效能優化的兩個個方向。
一．原始碼優化
1、**模組化，咱們可以把很多常用的地方封裝成單獨的元件，在需要用到的地方引用，而不是寫過多重複的**，每乙個元件都要明確含義，復用性越高越好，可配置型越強越好，包括咱們的css也可以通過less和sass的自定義css變數來減少重複**。
2、for迴圈設定key值，在用v-for進行資料遍歷渲染的時候，為每一項都設定唯一的key值，為了讓vue內部核心**能更快地找到該條資料，當舊值和新值去對比的時候，可以更快的定位到diff。
3、vue路由設定成懶載入，當首屏渲染的時候，能夠加快渲染速度。
4、更加理解vue的生命週期，不要造成內部洩漏，使用過後的全域性變數在元件銷毀後重新置為null。
5、可以使用keep-alive，keep-alive是vue提供的乙個比較抽象的元件，用來對元件進行快取，從而節省效能。
二．打包優化
1、修改vue.config.js中的配置項，把productionsourcemap設定為false，不然最終打包過後會生成一些map檔案，如果不關掉，生產環境是可以通過map去檢視原始碼的，並且可以開啟gzip壓縮，使打包過後體積變小。
2、使用cdn的方式外部載入一些資源，比如vue-router、axios等vue的周邊外掛程式，在webpack.config.js裡面，externals裡面設定一些不必要打包的外部引用模組。然後在入門檔案index.html裡面通過cdn的方式去引入需要的外掛程式。
3、減少使用，因為對於網頁來說，會占用很大一部分體積，所以，優化的操作可以有效的來加快載入速度。可以用一些css3的效果來代替效果，或者使用雪碧圖來減少的體積。
4、按需引入，咱們使用的一些第三方庫可以通過按需引入的方式載入。避免引入不需要使用的部分，無端增加專案體積。比如在使用element-ui庫的時候，可以只引入需要用到的元件。
vue之效能優化
模組化 封裝成元件，減少 冗餘，每個元件有明確含義，復用性越高越好，可配置性越高越好，包括css。for迴圈設定key 迴圈時新增key，便於呢行 更好找到該條資料，新舊值相比時可以更快的定位到diff。路由懶載入 首屏渲染時能夠加快渲染速度 避免記憶體洩漏 使用過後的全域性變數在元件銷毀後重新置為...
Vue之效能優化
一 原始碼優化 1 模組化，咱們可以把很多常用的地方封裝成單獨的元件，在需要用到的地方引用，而不是寫過多重複的 每乙個元件都要明確含義，復用性越高越好，可配置型越強越好，包括咱們的css也可以通過less和sass的自定義css變數來減少重複 2 for迴圈設定key值，在用v for進行資料遍歷渲...
vue效能優化之keep alive
路由被切換的時候會重新傳送ajax請求。mounted鉤子函式會被重新執行 vue自帶標籤 kepp alvie keep alvie 路由內容載入一次後，就把路由內容放在記憶體中 相當於cookie 下次載入的時候就不用傳送ajax請求了 當我們需要重新傳送ajax請求時 當我們使用keep al...