Vue之性能優(yōu)化篇

這一期跟大家講一下關(guān)于優(yōu)化Vue性能相關(guān)的知識(shí)，Vue眾所周知，是一個(gè)輕量級(jí)的框架，源碼僅僅為72.9KB。

Vue也有它自己的缺點(diǎn)，就是首屏加載會(huì)比較慢，因?yàn)楹蛡鹘y(tǒng)項(xiàng)目相比，Vue會(huì)在首屏加載的時(shí)候加載出所有的組件和插件，并且向服務(wù)器請(qǐng)求數(shù)據(jù)，導(dǎo)致可能有時(shí)候首屏加載的時(shí)間就會(huì)到4秒、5秒的樣子。這很明顯是在挑戰(zhàn)用戶的耐心，按照慣例，最好能把加載時(shí)間控制在1秒左右。

接下來(lái)講一下Vue性能優(yōu)化的兩個(gè)方向源碼優(yōu)化與打包優(yōu)化：

源碼優(yōu)化

1.代碼模塊化，咱們可以把很多常用的地方封裝成單獨(dú)的組件。在需要用到的地方引用，而不是寫過(guò)多重復(fù)的代碼，每一個(gè)組件都要明確含義，復(fù)用性越高越好，可配置型越強(qiáng)越好，包括咱們的css也可以通過(guò)less和sass的自定義css變量來(lái)減少重復(fù)代碼。

2.for循環(huán)設(shè)置key值。在用v-for進(jìn)行數(shù)據(jù)遍歷渲染的時(shí)候，為每一項(xiàng)都設(shè)置唯一的key值，為了讓Vue內(nèi)部核心代碼能更快的找到該條數(shù)據(jù)，當(dāng)舊值和新值去對(duì)比的時(shí)候，可以更快的定位到diff。

3.Vue路由設(shè)置成懶加載。當(dāng)首屏渲染的時(shí)候，能夠加快渲染速度。

4.更加理解Vue的生命周期，不要造成內(nèi)部泄漏，使用過(guò)后的全局變量在組件銷毀后重新置為null。

5.使用keep-alive。keep-alive是Vue提供的一個(gè)比較抽象的組件，用來(lái)對(duì)組件進(jìn)行緩存，從而節(jié)省性能。

打包優(yōu)化

1.修改vue.config.js中的配置項(xiàng),把productionSourceMap設(shè)置為false。不然最終打包過(guò)后會(huì)生成一些map文件，并且在生成環(huán)境是可以通過(guò)map去查看到源碼的，這樣會(huì)造成源碼泄漏，這里建議大家設(shè)置為false。productionGzip設(shè)置為true可以開啟gzip壓縮，使打包過(guò)后體積變小。

2.使用cdn的方式外部加載一些資源，比如vue-router、axios等Vue的周邊插件,在webpack.config.js里面，externals里面設(shè)置一些不必要打包的外部引用模塊。然后在入門文件index.html里面通過(guò)cdn的方式去引入需要的插件。

3.減少圖片使用，因?yàn)閷?duì)于網(wǎng)頁(yè)來(lái)說(shuō)，圖片會(huì)占用很大一部分體積，所以，優(yōu)化圖片的操作可以有效的來(lái)加快加載速度。可以用一些css3的效果來(lái)代替圖片效果，或者使用雪碧圖來(lái)減少圖片的體積。

4.按需引入，咱們使用的一些第三方庫(kù)可以通過(guò)按需引入的方式加載。避免引入不需要使用的部分，無(wú)端增加項(xiàng)目體積。比如在使用element-ui庫(kù)的時(shí)候，可以只引入需要用到的組件。

最后總結(jié)一下，這篇文章大概細(xì)化了一下關(guān)于Vue的一些優(yōu)化方向，大家一定要記得，對(duì)于前端這個(gè)崗位來(lái)說(shuō)，性能優(yōu)化是一個(gè)很重要的點(diǎn)，為了讓用戶體有更好的體驗(yàn)，大家在提升自己技能的同時(shí)也要關(guān)注這些細(xì)小的方面喲~