VUE專案性能優化

• Vue 代碼層面的優化；
• Webpack 配置層面的優化；
• 基礎的Web技術層面的優化；

一、代碼層面的優化

1.1 v-if 和 v-show區分使用場景

v-if是 真正 的條件渲染，因為它會確保在切換程序中條件塊內的事件監聽器和子組件適當地被銷毀和重建；也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊，

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

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

1.2 computed 和 watch 區分使用場景

computed 是計算屬性，依賴其他屬性值，并且computed的值有快取，只有它依賴的屬性值發生改變，下一次獲取 computed的值時才會重新計算computed的值，

watch更多的是「觀察」的作用，類似于某些資料的監聽回呼 ，每當監聽的資料變化時都會執行回呼進行后續操作；

運用場景：

• 當我們需要進行數值計算，并且依賴于其它資料時，應該使用 computed，因為可以利用 computed 的快取特性，避免每次獲取值時，都要重新計算；
• 我們需要在資料變化時執行異步或開銷較大的操作時，應該使用 watch，使用 watch 選項允許我們執行異步操作 ( 訪問一個 API )，限制我們執行該操作的頻率，并在我們得到最終結果前，設定中間狀態，這些都是計算屬性無法做到的，
  

  除了本文案例：我還會在我的圈子分享以下圖中Vue實戰內容：將用視頻講解方式教大家，如果想學習可以進小編扣扣裙： 519293536 免費學習哦，有問題我都會盡力幫大家哦

  

1.3 v-for 遍歷必須為 item 添加key，且避免同事使用 v-if

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

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

推薦：

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

js
computed:{
	activeUsers:function(){
		return this.users.filter((user)=>{
			return user.isActive
		})
	}
}
復制代碼

不推薦：

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

1.4、長串列性能優化

Vue 會通過 Object.defineProperty對資料進行劫持，來實作視圖回應資料的變化，然而有些時候我們的組件就是純粹的資料展示，不會有任何改變，我們就不需要 Vue 來劫持我們的資料，在大量資料展示的情況下，這能夠很明顯的減少組件初始化的時間，那如何禁止 Vue 劫持我們的資料呢？可以通過 Object.freeze 方法來凍結一個物件，一旦被凍結的物件就再也不能被修改了，

export default{
	data:() => ({
		users:{}
	}),
	async created() {
		const users = await axios.get("/api/users");
		this.users = Object.freeze(users);
	}
}
復制代碼

1.5、事件的銷毀

Vue 組件銷毀時，會自動清理它與其它實體的連接，解綁它的全部指令及事件監聽器，但是僅限于組件本身的事件，如果在 js 內使用addEventListene 等方式是不會自動銷毀的，我們需要在組件銷毀時手動移除這些事件的監聽，以免造成記憶體泄露，如：

created() {
	addEventListener('click',this.click,false);
},
beforeDestroy() {
	removeEventListener('click',this.click,false);
}
復制代碼

1.6、圖片資源懶加載

對于圖片過多的頁面，為了加速頁面加載速度，所以很多時候我們需要將頁面內未出現在可視區域內的圖片先不做加載， 等到滾動到可視區域后再去加載，這樣對于頁面加載性能上會有很大的提升，也提高了用戶體驗，我們在專案中使用 Vue 的vue-lazyload插件： (1) 安裝插件

npm install vue-lazyload --save-dev
復制代碼

(2)在入口檔案main.js中引入并使用

import VueLazyload from 'vue-lazyload'
復制代碼

然后再vue中直接使用

Vue.use(VueLazyload)
復制代碼

或者添加自定義選項

Vue.use(VueLazyload,{
	preLoad:1.3,
	error: 'dist/error.png',
	loading:'dist/loading.gif',
	attempt:1
})
復制代碼

(3)在vue檔案中將 img標簽的src屬性直接改為 v-lazy，從而將圖片顯示方式更改為懶加載顯示：

<img v-lazy="/static/img/1.png">
復制代碼

以上為 vue-lazyload 插件的簡單使用，如果要看插件的更多引數選項，可以查看 vue-lazyload 的 地址，

1.7 路由懶加載

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

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
	routes:[
		{ path:'/foo', component: Foo }
	]
})
復制代碼

1.8 第三方插件的按需引入

我們在專案中經常會需要引入第三方插件，如果我們直接引入整個插件，會導致專案的體積太大，我們可以借助 babel-plugin-component ，然后可以只引入需要的組件，以達到減小專案體積的目的，以下為專案中引入 element-ui 組件庫為例： (1) 首先，安裝 babel-plugin-component:

npm install babel-plugin-component -D
復制代碼

(2) 然后將.babelrc修改為：

{
	"presets":[["es2015",{"modules":false}]],
	"plugins":[
		[
			"component",
			{
				"libraryName":"element-ui",
				"styleLibraryName":"theme-chalk"
			}
		]
	]
}
復制代碼

(3) 在main.js 中引入部分組件

import Vue from 'vue'
import {Button, Select} from 'element-ui';

Vue.use(Button);
Vue.use(Select);
復制代碼

1.9 優化無線串列性能

如果你的應用存在非常長或者無限滾動的串列，那么需要采用 視窗化 的技術來優化性能，只需要渲染少部磁區域的內容，減少重新渲染組件和創建 dom 節點的時間，你可以參考以下開源專案 vue-virtual-scroll-list 和 vue-virtual-scroller 來優化這種無限串列的場景的，

1.10 服務端渲染SSR or 預渲染

服務端渲染是指 Vue 在客戶端將標簽渲染成的整個 html 片段的作業在服務端完成，服務端形成的 html 片段直接回傳給客戶端這個程序就叫做服務端渲染，

(1) 服務端渲染的優點：

• 更好的SEO： 因為SPA頁面的內容是通過Ajax獲取的，而搜索引擎爬取工具并不會等待Ajax異步完成后再抓取頁面內容，所以在SPA中是抓取不到頁面通過Ajax獲取到的內容；而SSR是直接有服務端回傳已渲染好的頁面（資料已經包含在頁面中），所以搜索引擎爬取工具可以抓取渲染好的頁面；
• 更快等待內容到達時間（首屏加載更快）：SPA會等待所有Vue編譯后的JS檔案都下載完成后，才開始進行頁面的渲染，檔案下載等需要一定的時間等，所以首屏渲染需要一定的時間；SSR直接由服務端渲染好頁面直接回傳顯示，無需等待下載js檔案及再去渲染等，所以SSR有更快的內容到達時間，

(2) 服務端渲染的缺點

• 更多的開發條件限制：例如服務端渲染只支持beforeCreate和created兩個鉤子函式，這樣會導致一些外部擴展庫需要特殊處理，才能在服務端渲染應用程式中運行；并且與可以部署在任何靜態檔案服務器上的完全靜態單頁面應用程式SPA不同，服務端渲染應用程式，需要處于 Node.js server運行環境，
• 更多的服務器負載：在Node.js中渲染完整的應用程式，顯然會比僅僅提供靜態檔案的server更加大量占用CPU資源，因此如果你預料在高流量環境下使用，請準備相應的服務器負載，并明智的采用快取策略，

如果你的專案的SEO和首屏渲染是評價專案的關鍵指標，那么你的專案就需要服務端渲染來幫組你實作最佳的初始加載性能和SEO，具體的Vue SSR如何實作，可以參考作者的另一篇《Vue SSR 踩坑之旅》

二、Webpack層面的優化

2.1、Webpack 對圖片進行壓縮

在 vue 專案中除了可以在 webpack.base.conf.js 中 url-loader 中設定 limit 大小來對圖片處理，對小于limit的圖片轉化為 base64 格式，其余的不做操作，所以對有些較大的圖片資源，在請求資源的時候，加載會很慢，我們可以用image-webpack-loader來壓縮圖片： (1) 首先安裝 image-webpack-loader:

npm install image-webpack-loader --save-dev
復制代碼

(2) 然后，在webpack.base.conf.js中進行配置：

{
	test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
	use:[
	    {
	    loader: 'url-loader',
	    options: {
	      limit: 10000,
	      name: utils.assetsPath('img/[name].[hash:7].[ext]')
	      }
	    },
	    {
	      loader: 'image-webpack-loader',
	      options: {
	        bypassOnDebug: true,
	      }
	    }
	  ]
}
復制代碼

2.2、減少 ES6 轉為 ES5 的冗余代碼

Babel 插件會在將 ES6 代碼轉換成 ES5 代碼時會注入一些輔助函式，例如下面的 ES6 代碼：

class HelloWebpack extends Component{...}
復制代碼

這段代碼再被轉換成能正常運行的 ES5 代碼時需要以下兩個輔助函式：

babel-runtime/helpers/createClass  // 用于實作 class 語法
babel-runtime/helpers/inherits  // 用于實作 extends 語法
復制代碼

在默認情況下， Babel 會在每個輸出檔案中內嵌這些依賴的輔助函式代碼，如果多個源代碼檔案都依賴這些輔助函式，那么這些輔助函式的代碼將會出現很多次，造成代碼冗余，為了不讓這些輔助函式的代碼重復出現，可以在依賴它們時通過require('babel-runtime/helpers/createClass')的方式匯入，這樣就能做到只讓它們出現一次，babel-plugin-transform-runtime 插件就是用來實作這個作用的，將相關輔助函式進行替換成匯入陳述句，從而減小 babel 編譯出來的代碼的檔案大小，

(1) 首先，安裝 babel-plugin-transform-runtime:

npm install babel-plugin-transform-runtime --save-dev
復制代碼

(2) 然后，修改 .babelrc組態檔：

"plugins": [
    "transform-runtime"
]
復制代碼

如果要看插件的更多詳細內容，可以查看babel-plugin-transform-runtime的 詳細介紹，

ps:vue-cli腳手架創建的專案都會自帶這個插件的好像.

2.3、 提取公共代碼

如果專案中沒有去講每個頁面的第三方庫和公共模塊提取出來，則專案會存在以下問題：

• 相同的資源被重復加載，浪費用戶的流量和服務器的成本，
• 每個頁面需要加載的資源太大，導致網頁首屏加載緩慢，影響用戶體驗，

所以我們需要將多個頁面的公共代碼抽離成單獨的檔案，來優化以上問題，Webpack內置專門用于提取多個Chunk中公共部分的插件 CommonsChunkPlugin，我們在專案中 CommonsChunkPlugin的配置如下：

// 所有在 package.json 里面依賴的包，都會被打包進 vendor.js這個檔案中，
new webpack.optimize.CommonsChunkPlugin({
	name:'vendor',
	minChunks:function(module,count){
		return(
			module.resource && 
			/\.js$/.test(module.resource) &&
			module.resource.indexOf(
				path.join(__dirname,'../node_modules')
			) === 0
		);
	}
}),

//抽取出代碼模塊的映射關系
new webpack.optimize.CommonsChunkPlugin({
	name:'manifest',
	chunks:['vendor']
})
復制代碼

如果要查看插件的更多詳細內容，可以查看commonsChunkPlugin 的詳細介紹

2.4模板預編譯

當使用DOM內模板或JavaScript內的字串模板時，模板會在運行時編譯為渲染函式，通常情況下這個程序已經足夠快了，但對于性能敏感的應用還是最好避免這種用法，

預編譯模板最簡單的方式就是使用單檔案組件--相關的構建設定會自動預編譯處理好，所以構建好的代碼已經包含了編譯出來的渲染函式而不是原始的模板字串，

如果你使用webpack，并且喜歡分離JavaScript和模板檔案，你可以使用vue-template-loader,它也可以在構建程序中把模板檔案轉換成為JavaScript渲染函式，

2.5 提取組件的CSS

當使用單檔案組件時，組件內的CSS會以style標簽的方式通過JavaScript動態注入，這有一些小小的運行時開銷，如果你使用服務端渲染，這會導致一段“無樣式內容閃爍（fouc）”，將所有組件的CSS提取到同一個檔案可以避免這個問題，也會讓CSS更好地進行壓縮和快取， 查閱這個構建工具各自的檔案來了解更多：

• webpack+vue-loader（vue-cli的webpack模板已預先配置好）
• Browserify + vueify Browserify官網 vueify
• Rollup+ rollup-plugin-vue Rollup官網 rollup-plugin-vue介紹

2.6、優化SourceMap

SourceMap使用教程

我們在專案進行打包后，會將開發中的多個檔案代碼打包到一個檔案中，并且經過壓縮、去掉多余的空格、babel編譯化后，最終將編譯得到的代碼會用于線上環境，那么這樣處理后的代碼和源代碼會有很大的差別，當有bug的時候，我們只能定位到壓縮處理后的代碼位置，無法定位到開發環境中的代碼，對于開發來說不好除錯定位問題，因此sourceMap出現了，它就是為了解決不好除錯代碼問題的，

SourceMap的可選值如下（+號越多，代表速度越快，-號越多，代表速度越慢，o 代表中等速度）

開發環境推薦：cheap-module-eval-source-map 生產環境推薦：cheap-module-source-map

原因如下：

• cheap: 源代碼中的串列資訊是沒有任何作用，因此我們打包后的檔案不希望包含列相關資訊，只有行資訊能建立打包前后的依賴關系，因此不管是開發環境或生產環境，我們都希望添加 cheap 的基本型別來忽略打包前后的列資訊，
• module： 不管是開發環境還是正式環境，我們都希望能定位到bug的源代碼具體的位置，比如說某個vue檔案報錯了，我們希望能定位到具體Vue檔案，因此我們也需要module配置；
• source-map: source-map 會為每一個打包后的模塊生成獨立的sourcemap檔案，因此我們需要增加source-map屬性，
• eval-source-map： eval打包代碼的速度非常快，因為他不生成map檔案，但是可以對eval組合使用 eval-source-map 使用會將map檔案以 DataURL的形式存在打包后的js檔案中，在正式環境中不要使用eval-source-map，因為它會增加檔案的大小，但是在開發環境中，可以試用下，因為他們的打包速度很快，

2.7 構建結構輸出分析

Webpack輸出的代碼可讀性非常差而且檔案非常大，讓我們非常頭疼，為了更簡單、直觀地分析輸出結構，社區中出現了許多可視化分析工具，這些工具以圖形的方式將結果更直觀地展現出來，讓我們快速了解問題所在，接下來講解我們在Vue專案中用到的分析工具：webpack-bundle-analyzer.

我們在專案中 webpack.prod.conf.js進行配置：

if(config.build.bundleAnalyzerReport){
	var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  webpackConfig.plugins.push(new BundleAnalyzerPlugin());
}
復制代碼

執行 npm run build \--report后生成分析報告如下：

2.8、 Vue專案的編譯優化

如果你的Vue專案使用Webpack編譯，需要你喝一杯咖啡的時間，那么也許你需要對專案的webpack配置進行游湖啊，提高Webpack的構建效率，具體如何進行Vue專案的Webpack構建優化，可以參考：輕松優化你的webpack

三、基礎的Web技術優化

3.1、開啟gzip壓縮

gzip 是 GNUzip 的縮寫，最早用于 UNIX 系統的檔案壓縮，HTTP 協議上的 gzip 編碼是一種用來改進 web 應用程式性能的技術，web 服務器和客戶端（瀏覽器）必須共同支持 gzip，目前主流的瀏覽器，Chrome，firefox，IE等都支持該協議，常見的服務器如 Apache，Nginx，IIS 同樣支持，gzip 壓縮效率非常高，通常可以達到 70% 的壓縮率，也就是說，如果你的網頁有 30K，壓縮之后就變成了 9K 左右

以下我們以服務端使用我們熟悉的 express 為例，開啟 gzip 非常簡單，相關步驟如下：

• 安裝：

npm install compression --save
復制代碼

• 添加代碼邏輯

var compression = require('compression');
var app = express();
app.use(compression())
復制代碼

• 重啟服務，觀察網路面板里面的 response header，如果看到如下紅圈里的欄位則表明 gzip 開啟成功 ：

3.2、瀏覽器快取

為了提高用戶加載頁面的速度，對靜態資源進行快取是非常必要的，根據是否需要重新向服務器發起請求來分類，將 HTTP 快取規則分為兩大類（強制快取，對比快取），如果對快取機制還不是了解很清楚的，關于 HTTP 快取的文章《深入理解HTTP快取機制及原理》，這里不再贅述，

都會了嗎？接下來才是重點：我會在我的圈子分享以下圖中Vue實戰內容：將用視頻講解方式教大家，如果想學習可以進小編扣扣裙： 519293536 免費學習哦，有問題我都會盡力幫大家哦

如果想學習以上內容可以進小編扣扣裙： 519293536 免費學習哦，有問題我都會盡力幫大家哦

本文的文字及圖片來源于網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,著作權歸原作者所有,如有問題請及時聯系我們以作處理

標籤：JavaScript

上一篇：Vue原始碼閱讀，如何渲染代碼塊生成？ 本文詳解

下一篇：JavaScript連載17-變數提升、物件的分類