2. 程式人生 > 其它 >Vue專案優化.

Vue專案優化.

阿新 • • 發佈：2021-01-21

技術標籤：Vuevue

程式碼優化

1.使用keep-alive快取不活動的元件例項。

keel-alive是一個抽象元件：它自身不會渲染一個DOM元素，也不會出現在父元件鏈中；使用keep-alive包裹動態元件時，會快取不活動的元件例項，而不是銷燬它們。

  • 在動態元件中的應用
<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
     <component :is="currentComponent"
 
></component>
</keep-alive>
  • 在vue-router中的應用
<keep-alive :include="whiteList" :exclude="blackList">
    <router-view></router-view>
</keep-alive>

include定義快取白名單，keep-alive會快取命中的元件；exclude定義快取黑名單，被命中的元件將不會被快取；
很多時候也可以配合路由的meta屬性使用

export default
 
[
 {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //需要被快取的元件
 },
 {
  path:'/book',
  name:'book',
  components:Book,
  meta:{
     keepAlive:false //不需要被快取的元件
 } 
]
<keep-alive>
  <router-view v-if="this.$route.meat.keepAlive"></router-view>
  <!
 
--這裡是會被快取的元件-->
</keep-alive>
<keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>
<!--這裡是不會被快取的元件-->

2.使用路由懶載入

Vue 是單頁面應用，可能會有很多的路由引入 ，這樣使用 webpcak 打包後的檔案很大，當進入首頁時，載入的資源過多，頁面會出現白屏的情況，不利於使用者體驗。如果我們能把不同路由對應的元件分割成不同的程式碼塊，然後當路由被訪問的時候才載入對應的元件，這樣就更加高效了。這樣會大大提高首屏顯示的速度，但是可能其他的頁面的速度就會降下來。

路由懶載入：

export default new Router({
  mode: 'history',
  routes: [
			{
		     path: '/',
		     component: ()=>import('@/components/DefaultIndex') }
		     ]
		     })

3.圖片懶載入
對於圖片過多的頁面，為了提高頁面的載入速度，所以很多時候我們需要將頁面內未出現在可視區域內的圖片先不做載入，等到圖片進入可視區域內的時候再去載入。這樣對於頁面載入效能上會有很大的提升，也提高了使用者的體驗，使用圖片懶載入我們需要在專案中使用Vue的vue-lazyload外掛:

npm引入：npm i vue-lazyload -S
CDN引入：[https://unpkg.com/vue-lazyload/vue-lazyload.js](https://unpkg.com/vue-lazyload/vue-lazyload.js)

使用：
main.js:

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload)
 
// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})
 
new Vue({
  el: 'body',
  components: {
    App
  }
})

template:

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

4.使用防抖節流函式（效能優化）
那麼怎麼在Vue中使用呢？
在公共方法（untils.js中），加入函式防抖和節流方法：

// 防抖
export function _debounce(fn, delay) {
    var delay = delay || 200;
    var timer;
    return function () {
        var th = this;
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            timer = null;
            fn.apply(th, args);
        }, delay);
    };
}
// 節流
export function _throttle(fn, interval) {
    var last;
    var timer;
    var interval = interval || 200;
    return function () {
        var th = this;
        var args = arguments;
        var now = +new Date();
        if (last && now - last < interval) {
            clearTimeout(timer);
            timer = setTimeout(function () {
                last = now;
                fn.apply(th, args);
            }, interval);
        } else {
            last = now;
            fn.apply(th, args);
        }
    }
}

在需要的元件中引用：

import { _debounce } from "@/utils/public";

在methods中使用：

  methods: {
    // 改變場數
    changefield: _debounce(function(_type, index, item) {
        // do something ...
    }, 200)
  }

應用：

函式防抖（debounce）

在事件被觸發n秒後再執行回撥，如果在這n秒內又被觸發，則重新計時。

<body>
      <input type="text" id='unDebounce'>
</body>
</html>

<script>

    //模擬一段ajax請求
    function ajax(content){ 
        console.log('ajax request ' + content) 
        };
    letinputa = document.getElementById('unDebounce');
        function fn(e){ ajax(e.target.value) }
    //防抖函式，處理多次被觸發的事件，只執行最後一次
    inputa.addEventListener('input', fn)
</script>

看一下執行效果：
在這裡插入圖片描述
可以看到，我們只要輸入一個字元，就會觸發這次ajax請求。不僅從資源上來說是很浪費的行為，而且實際應用中，使用者也是輸出完整的字元後，才會請求。下面我們優化一下：

<body>
      <input type="text" id='unDebounce'>
</body>
</html>

<script>
    //防抖函式
    function _debounce(fn, delay) {
    var delay = delay || 200;
    var timer;
    return function () {
        var th = this;
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            timer = null;
            fn.apply(th, args);
        }, delay);
    };
}

    //模擬一段ajax請求
    function ajax(content){ 
        console.log('ajax request ' + content) 
        };
    let inputa = document.getElementById('unDebounce');
    function fn(e){ ajax(e.target.value) }
    //防抖函式，處理多次被觸發的事件，只執行最後一次
    inputa.addEventListener('input', _debounce(fn,1000))
</script>

在這裡插入圖片描述
我們加入了防抖以後，當你在頻繁的輸入時，並不會傳送請求，只有當你在指定間隔內沒有輸入時，才會執行函式。如果停止輸入但是在指定間隔內又輸入，會重新觸發計時。

個人理解 函式防抖就是法師發技能的時候要讀條，技能讀條沒完再按技能就會重新讀條。

函式節流(throttle)

規定在一個單位時間內，只能觸發一次函式。如果這個單位時間內觸發多次函式，只有一次生效。


<body>
      <input type="text" id='unDebounce'>
</body>
</html>

<script>
//節流函式
function _throttle(fn, interval) {
    var last;
    var timer;
    var interval = interval || 200;
    return function () {
        var th = this;
        var args = arguments;
        var now = +new Date();
        if (last && now - last < interval) {
            clearTimeout(timer);
            timer = setTimeout(function () {
                last = now;
                fn.apply(th, args);
            }, interval);
        } else {
            last = now;
            fn.apply(th, args);
        }
    }
}
    //模擬一段ajax請求
    function ajax(content){ 
        console.log('ajax request ' + content) 
        };
    let inputa = document.getElementById('unDebounce');
    function fn(e){ ajax(e.target.value) }
    //防抖節流，無論你輸入多塊，每隔1秒鐘執行一次
    inputa.addEventListener('input', _throttle(fn,1000))
</script>

在這裡插入圖片描述
不管我們設定的執行時間間隔多小，總是1s內只執行一次。

個人理解 函式節流就是fps遊戲的射速，就算一直按著滑鼠射擊，也只會在規定射速內射出子彈。

總結

函式防抖和函式節流都是防止某一時間頻繁觸發，但是這兩兄弟之間的原理卻不一樣。
函式防抖是某一段時間內只執行一次，而函式節流是間隔時間執行。

結合應用場景

debounce

  • search搜尋聯想，使用者在不斷輸入值時，用防抖來節約請求資源。
  • window觸發resize的時候，不斷的調整瀏覽器視窗大小會不斷的觸發這個事件，用防抖來讓其只觸發一次

throttle

  • 滑鼠不斷點選觸發，mousedown(單位時間內只觸發一次)
  • 拖拽事件，每拖動1px都會觸發onmousemove（可以用throttle優化，每秒觸發一次）
  • 監聽滾動事件，比如是否滑到底部自動載入更多，用throttle來判斷

5.v-for遍歷必須為item新增key，避免同時使用v-if

  • v-for 遍歷必須為 item 新增 key

在列表資料進行遍歷渲染時，需要為每一項 item 設定唯一 key 值，方便 Vue.js 內部機制精準找到該條列表資料。當 state
更新時，新的狀態值和舊的狀態值對比，較快地定位到 diff 。

  • v-for 遍歷避免同時使用 v-if

v-for 比 v-if 優先順序高，如果每一次都需要遍歷整個陣列，將會影響速度，尤其是當之需要渲染很小一部分的時候，必要情況下應該替換成
computed 屬性。

推薦：

<template>
  <div class="home">
    <ul>
      <li
        v-for="user in activeUsers"
        :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data(){
    return {
      users:[{id:1,name:'zhangsan',isActive:true},{id:2,name:'lisi',isActive:true},{id:3,name:'wangwu',isActive:false},{id:4,name:'maliu',isActive:true},]
    }
  },
  computed: {
    activeUsers: function () {
    //  [js 的filter（）方法](https://www.cnblogs.com/qiu2841/p/8961017.html)
      return this.users.filter(function (user) {
          return user.isActive
      })
    }
  }
}
</script>

不推薦：

<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id">
    {{ user.name }}
  </li>
</ul>

6.v-if和v-show區分使用場景
v-if是真正的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當的被銷燬和重建；也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。

v-show就簡單得多， 不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 的 display 屬性進行切換。

所以，v-if 適用於在執行時很少改變條件，不需要頻繁切換條件的場景； v-show則適用於需要非常頻繁切換條件的場景。

相關推薦

1：vue專案優化總結

1：永遠不要再同一行使用v-for 跟 v-if。因為v-for的迴圈優先執行。寫在同一行造成效能的浪費，先迴圈建立dom再銷燬dom。如果遇到這種情況，用計算屬性過濾掉v-if為false的條件。

Vue專案優化上線

專案優化上線 1.專案優化 ①頁面進度條效果 執行依賴->nprogress 匯入包和樣式 // [main.js]

vue專案優化與上線

一.專案優化策略 1.生成打包報告 2.第三方庫啟用CDN 3.Element-ui元件按需載入 4.首頁內容定製

Vue專案優化.

技術標籤：Vuevue 程式碼優化 1.使用keep-alive快取不活動的元件例項。 keel-alive是一個抽象元件：它自身不會渲染一個DOM元素，也不會出現在父元件鏈中；使用keep-alive包裹動態元件時，會快取不活動的元件例項

Vue專案優化的一些實戰策略

vue專案完成後就要從開發環境轉成生產環境 一些第三方的包體積過大，導致生成js檔案過於龐大，這是時候可以生成打包報告來檢視專案中的問題

Vue專案優化打包之前端必備加分項

目錄前言一、路由懶載入1. 為什麼需要路由懶載入2. 如何實現路由懶載入3. 路由懶載入中的魔法註釋二、分析包大小1. 需求2. 如何生成打包分析檔案三、webpack配置排除打包1. 需求2. 排除打包四、 引用網路資源1. 需求

vue專案優化

粒子特效： vue-particles nprogress 網頁載入進度條 全域性前置守衛 NProgress.start() 全域性後置守衛 ：NProgress.done()

vue 專案優化：引入cdn使用外掛， 減少打包體積

在index.html 中通過script 標籤引入cdn連結 <html lang=\"zh\"> <head> <title>vue-demo</title>

Vue專案優化打包詳解

目錄前言一、路由懶載入1.為什麼需要路由懶載入2.如何實現路由懶載入3.路由懶載入中的魔法註釋二、分析包大小1.需求2.如何生成打包分析檔案三、webpack配置排除打包1.需求2.排除打包四、 引用網路資源1.需求2.CDN3.

Vue-專案優化

vue 版本：3.0 @vue/cli 版本：5.0 專案優化整體策略 生成打包報告 第三方庫啟用CDN ui 元件按需載入

Vue專案上線要做哪些優化？面試必學

前言 大家好啊，我是wangly19，一名前端摸魚小能手。最近忙著開源專案的東西，還有公司專案的迭代問題，導致更新文章的頻率有點低了。也來聊聊我在幹嘛吧。

vue專案路由、元件優化及使用nodeJs自動建立檔案

vue專案路由、元件優化及使用nodeJs自動建立檔案 我們在使用Vue進行開發的過程中，每次都需要先建立路由，再在主檔案中引入模組路由。如下：

Vue專案打包編譯優化方案

1. 不生成.map檔案 　　預設情況下，當我們執行 npm run build 命令打包完一個專案後，會得到一個dist目錄，裡面有一個js目錄，存放了該專案編譯後的所有js檔案。

vue專案 通過配置webpack外掛DllPlugin進行優化打包速度，以及本地執行編譯速度

vue 開發過程中，儲存一次就會編譯一次，如果能夠減少編譯的時間，哪怕是一丁點，也能節省不少時間。開發過程中個人編寫的原始檔才會頻繁變動，而一些庫檔案我們一般是不會去改動的。如果能把這些庫檔案提取出來，就

vue專案開啟Gzip壓縮和效能優化操作

vue 專案開啟gzip自拍壓縮和部署 nginx 開啟gzip優化效能 第一步：在vue專案中安裝依賴並將productionGzip改為true，開啟Gzip壓縮：

vue 專案效能優化

vue效能優化 參考連結： https://www.jianshu.com/p/0c05faee0975（打包分析軟體） https://blog.csdn.net/qq_37818095/article/details/94616497(前端效能分析)

淺析vue專案效能優化應該注意的點

　　最近總結了一下自己在專案中使用到的效能優化手段，這裡主要從兩個部分來詳解vue專案的效能優化：程式碼層優化、webpack打包優化

Vue 專案效能優化方案

前言 Vue 框架通過資料雙向繫結和虛擬 DOM 技術，幫我們處理了前端開發中最髒最累的 DOM 操作部分， 我們不再需要去考慮如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 專案中仍然存在專案首屏優化、Webpack 編譯配

vue專案效能優化系列

vue專案效能優化1，優化：使用webpack-bundle-analyzer分析vue的打包js檔案大小 基於webpack 3、vue 2和vue-cli 2的效能優化。

Vue+express專案優化上線（2）

Vue+express專案優化上線（2） 目錄Vue+express專案優化上線（2）1.購買伺服器以及域名2.繫結域名指向主機IP3.防火牆設定4.配置伺服器4.1 設定root賬號密碼4.2 下載Xshell和Xftp簡化遠端連線伺服器4.3 部署Nodejs環境