Vue項目性能優化是個老生常談的問題了，本人開發過程中也查過很多關於Vue項目優化的文章，每篇文章說的都差不多，本章我就結合我的心得和大家的智慧做一個總結。
1.懶加載
懶加載應該是提高性能的最簡單有效的方式了，一個項目加上懶加載速度和逼格都會上一個臺階。懶加載的意義在於按需加載，不會讓項目剛開始運行速度就很慢，能大大的優化用戶體驗。Vue項目懶加載分爲圖片懶加載和路由懶加載，具體寫法如下：
路由懶加載
{
path: '/home',
name: 'home',
component: resolve => require(['@/components/home'],resolve)
},{
path: '/index',
name: 'Index',
component: resolve => require(['@/components/index'],resolve)
},{
path: '/about',
name: 'about',
component: resolve => require(['@/components/about'],resolve)
}
圖片懶加載
<!--使用前需先安裝配置vue-lazyload-->
<a href="javascript:;"><img v-lazy="'/static/img/abc.jpg'"></a>
2.代碼優化
代碼優化是一個項目優化的核心，不僅能提高項目質量和用戶體驗，同時還能讓項目更容易維護，代碼優化主要有一下幾個方面：
功能重複組件和函數封裝，提高代碼複用率
組件封裝這點非常重要，但是也常常被人忽略，之所以這麼說是因爲組件封裝不僅能提高開發效率，還能減少以後維護成本。例如；一些級別比較高的程序員會在開發之前設計好一些常用組件庫，現成的（東北話）組件會讓其他人大大增加開發效率、如果需要修改和優化只需要修改一處就好，不至於牽一髮而動全身。中等程序員則是在開發過程中把重複組件提出來進行組件封裝；那最低級程序員則是根本沒有這方面的意識。如何提高組件封裝的意識才是解決的根本所在。
儘量減少本地存儲的使用
儘量減少本地存儲（localStorage、sessionStorage、cookie）的使用也是提高性能的方式之一，有些小夥伴喜歡用本地存儲傳參，傳參的方式有很多種，比如：路由傳參或者vuex等
減少watch使用 v-if 取代 v-show
watch監聽大量狀態時會讓瀏覽器出現卡頓現象，所以儘量減少使用。v-if和v-show的區別是；v-if是不渲染，而v-show是渲染不顯示，至於如何使用視情況而定
3.用戶體驗優化
添加Loading
當用戶需要等待時間較長時，必須添加等待loading，這個不多說，用處大大地
路由邏輯
路由邏輯是一個項目的核心，如果路由邏輯不通的話，用戶很有可能點返回按鈕的時候一直在兩個頁面之間跳轉，進入死循環。其次，路由邏輯和用戶體驗息息相關，比如用戶下完單應該跳轉到訂單詳情頁，而不是首頁等等
樣式統一
兩個頁面的相同功能按鈕，它的大小顏色如果不用的話就會讓人感覺你的App不夠專業
滾動組件的使用
網頁的原聲滾動用戶體驗不好，我們需要使用一些滾動組件，比如：better-scroll、iscroller、scroller等，滾動組件的使用能讓頁面滾動更自然，逼格更高
好了，以上就是總結的Vue項目優化的相關內容，歡迎留言點評