來(lái)源:北大青鳥(niǎo)總部 2020年04月01日 14:36
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ù)代碼。
3.Vue路由設(shè)置成懶加載。當(dāng)首屏渲染的時(shí)候,能夠加快渲染速度。
4.更加理解Vue的生命周期,不要造成內(nèi)部泄漏,使用過(guò)后的全局變量在組件銷毀后重新置為null。
打包優(yōu)化
2.使用cdn的方式外部加載一些資源,比如vue-router、axios等Vue的周邊插件,在webpack.config.js里面,externals里面設(shè)置一些不必要打包的外部引用模塊。然后在入門文件index.html里面通過(guò)cdn的方式去引入需要的插件。
最后總結(jié)一下,這篇文章小編大概細(xì)化了一下關(guān)于Vue的一些優(yōu)化方向,大家一定要記得,對(duì)于前端這個(gè)崗位來(lái)說(shuō),性能優(yōu)化是一個(gè)很重要的點(diǎn),為了讓用戶體有更好的體驗(yàn),大家在提升自己技能的同時(shí)也要關(guān)注這些細(xì)小的方面喲~