前言
你們好啊，我是wangly19，一名前端摸魚小能手。最近忙着開源項目的東西，還有公司項目的迭代問題，致使更新文章的頻率有點低了。也來聊聊我在幹嗎吧。html
第一個事情就是比較個人閹割版UI Design，要開始Vue3.0的開發工做，因此近期都在看Vue3.0的東西。 其次就是和UI配套的方法庫，也是我近期的一個項目，是一個Typescript生產的小東西。但願可以對於你們有一些幫助。前端
eleganceUI框架：Github倉庫vue
這篇文章呢，主要是作一個Vue性能優化的帖子，作一個參考文檔，對之後項目上線作一些集合文檔。若是對各位在項目優化時，作一個文檔參照。node
開發過程
在開發項目的時候，就要注意項目的一些小技巧，下面我就羅列一些常常用到的優化的方法吧。同時老規矩，查缺補漏。webpack
優先使用vIf
vIf 和 vShow 理論上都是做用於元素的顯示隱藏，只是一個是直接對DOM，一個是經過CSS的 display 來操做的，在項目中大部分的時候我都是直接使用 vIf 直接代替使用 vShow ，只有當DOM頻繁進行顯示和隱藏的時候，可是這種場景很是少見，我只在信息推送優先級中使用過，項目中一直經過 WebSocket 推的消息進行消息的場景遇到過，頻繁推送不一樣類型的通知。ios
vFor和vIf不要一塊兒使用
一、vFor 的優先級實際上是比 vIF 高的，因此當兩個指令出現來一個DOM中，那麼 vFor 渲染的當前列表，每一次都須要進行一次 vIf 的判斷。而相應的列表也會從新變化，這個看起來是很是不合理的。所以當你須要進行同步指令的時候。儘可能使用計算屬性，先將 vIf 不須要的值先過濾掉。他看起像是下面這樣的。
二、前端技術是不斷更新的。順便給你們點福利吧，送大家2020最新企業級別Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！git
// 計算屬性 computed: { filterList: function () { return this.showData.filter(function (data) { return data.isShow }) } // DOM <ul> <li v-for="item in filterList" :key="item.id"> {{ item.name }} </li> </ul> 複製代碼
vFor key避免使用index做爲標識
其實你們都知道 vFor 是不推薦使用 index 下標來做爲 key 的值，這是一個很是好理解的知識點，能夠從圖中看到，當index做爲標識的時候，插入一條數據的時候，列表中它後面的key都發生了變化，那麼當前的 vFor 都會對key變化的 Element 從新渲染，可是其實它們除了插入的 Element 數據都沒有發生改變，這就致使了沒有必要的開銷。因此，儘可能不要用index做爲標識，而去採用數據中的惟一值，如 id 等字段。github
釋放組件資源
什麼是資源? 每建立出一個事物都須要消耗資源，資源不是憑空產生的，是分配出來的。因此說，當組件銷燬後，儘可能把咱們開闢出來的資源塊給銷燬掉，好比 setInterval , addEventListener等，若是你不去手動給釋放掉，那麼它們依舊會佔用一部分資源。這就致使了沒有必要的資源浪費。多來幾回後，能夠想象下資源佔用率確定是上升的。web
添加的事件後端
created() {
addEventListener('click', Function, false) }, beforeDestroy() { removeEventListener('click', Function false) } 複製代碼
定時器
created() {
this.currentInterVal = setInterval(code,millisec,lang) }, beforeDestroy() { clearInterval(this.currentInterVal) } 複製代碼
長列表
項目當中，會涉及到很是多的長列表場景，區別於普通的分頁來講，大部分的前端在作這種 無限列表 的時候，大部分新手前端都是經過一個 vFor 將數據遍歷出來，想的多一點的就是作一個分頁。滾動到底部的時候就繼續請求 API 。其實這也是未思考穩當的。隨着數據的加載，DOM會愈來愈多，這樣就致使了性能開銷的問題產生了，當頁面上的DOM太多的時候，不免給個人客戶端形成必定的壓力，因此對於長列表渲染的時候，建議將DOM移除掉，相似於圖片懶加載的模式，只有出如今視圖上的DOM纔是重要的DOM。網絡上有一些很好的解決方案，如 vue-virtual-scroller 庫等等，你們能夠理性的選擇。
圖片合理的優化方式
圖片應該都不陌生吧，在網頁中，每每存在大量的圖片資源，這些資源或大或小。當咱們頁面中DOM中存在大量的圖片時，不免不會碰到一些加載緩慢的問題，致使圖片出現加載失敗的問題。網絡上大部分都在使用 懶加載 的使用方式，只有當 存在圖片的DOM 出如今頁面上纔會進行圖片的加載，無形中起到了分流的做用，下面就說一套實踐的方案吧
- 小圖標使用
SVG或者字體圖標 - 經過
base64和webp的方式加載小型圖片 - 能經過cdn加速的大圖儘可能用cdn
- 大部分框架都帶有懶加載的圖片，不要嫌麻煩，多花點時間使用它
路由器按需加載
對於路由的懶加載，若是還不會的話，那麼就真該好好的從新去學習一下了。路由懶加載的方式有兩種，一種是require 另外一種是 import 。當路由按需加載後，那麼Vue服務在第一次加載時的壓力就可以相應的小一些，不會出現 超長白屏P0問題 。下面是兩種路由懶加載的寫法：
// require法 component: resolve=>(require(['@/components/HelloWorld'],resolve)) // import component: () => import('@/components/HelloWorld') 複製代碼
UI框架使用方式
確保在使用UI框架如， Element ， And Design 等UI框架的時候，都使用官方給暴露出來的按需加載組件。只有真正用到它的時候時候纔會加載當前UI框架的組件，而不是一開始就將整個組件庫給加載出來，咱們都知道，一個UI框架其實很大，相對比其餘的東西來講。所以，它在方便咱們開發者的同時，也無形中產生了多餘的開銷。可是項目週期開發的時候，不得不依賴它。因此建議儘可能的使用按需加載。合理的對項目進行止損，若是你不在乎，很是嫌麻煩，那麼能夠進行全局引入。
import { Button } from 'xxxx 複製代碼
首屏優化
衆所周知，第一次打開Vue的時候，若是你的項目夠大，那麼首次加載資源時，會很是的久。因爲資源沒有加載完畢，界面的DOM也不會渲染，會形成白屏的問題。用戶此時並不知道是加載的問題，因此會帶來一個很差的體驗。所以一般會在public下寫一個加載動畫，告訴用戶，網頁在加載中這個提示。當頁面加載成功後，頁面渲染出來的這一個體驗比白屏等開機要好太多了。所以，推薦你們都設計一個自家公司的loading加載方式放入index.html中吧。
項目過程
最小化JS文件
能夠經過webpack處理打包的JavaScript文件，讓其更加的精簡。在配置中，你能夠這麼作
config.optimization.minimize(true); 複製代碼
圖片資源壓縮
能夠經過 image-webpack-loader 插件對打包的圖片進行壓縮，看起來會對圖片的加載有一些提高。若是擔憂破壞圖片，能夠放棄使用它。
「$ yarn add image-webpack-loader
- - QAQ
config.module
.rule('images') .use('image-webpack-loader') .loader('image-webpack-loader') .options({ bypassOnDebug: true }) .end() 複製代碼
打包公共代碼
在 webpack4 中，能夠經過 optimization.minimize 將公共代碼進行打包，雖然我我的認爲這個東西對SPA應用來講，效果其實有限，但有勝於無，文字再小也是肉不是，因此說，在細節的把控上，永遠是無止境的。可是在webpack4中也是將CommonsChunkPlugin 改用 SplitChunksPlugin 了。感受評論掘友的提醒。
new webpack.optimize.CommonsChunkPlugin({ name: ['vendor','runtime'], filename: '[xxxxx].js' }) 複製代碼
刪除沉澱代碼
使用 Tree-Shaking 插件能夠將一些無用的沉澱泥沙代碼給清理掉。
依賴庫CDN加速
看到有小夥伴使用CDN的方式引入一些依賴包，以爲很是的 Nice ，而後我也開始使用了。我將 Vue Axios Echarts 等等都分離了出來，在正式環境下，經過CDN，確實有了一些明顯的提高，因此說你們能夠進行嘗試。
CDN LinkDI地址：BootCDN
// 在html引入script標籤後。在vue的配置中，進行聲明 configureWebpack: { externals: { 'echarts': 'echarts' // 配置使用CDN } } 複製代碼
GZIP
這個東西須要後端進行配置，固然，若是你有操做 Nginx 的權限的話，那麼能夠本身開啓，反正我認爲，這個東西提高仍是很大的。具體的能夠看這篇文章。這裏不過多贅述這個東西。 Vue CLI 2&3 下的項目優化實踐 —— CDN + Gzip + Prerender
後話
項目優化是很是重要的，一絲一毫的提高都是對用戶的負責。另外前端技術是不斷更新的。順便給你們點福利吧，送大家2020最新企業級別Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！
本文的文字及圖片來源於網絡加上本身的想法,僅供學習、交流使用,不具備任何商業用途,版權歸原做者全部,若有問題請及時聯繫咱們以做處理