學AI,好工作 就找北大青鳥
關注小青 聽課做題,輕松學習
周一至周日
4000-9696-28

【技術交流】關于Vue的一些優(yōu)化方向,值得收藏!

來源:北大青鳥總部 2020年04月01日 14:36

摘要: 關于Vue的一些優(yōu)化方向,值得收藏!
小編這一期跟大家講一下關于優(yōu)化Vue性能相關的知識,Vue眾所周知,是一個輕量級的框架,源碼僅僅為72.9KB。

Vue也有它自己的缺點,就是首屏加載會比較慢,因為和傳統(tǒng)項目相比,Vue會在首屏加載的時候加載出所有的組件和插件,并且向服務器請求數(shù)據,導致可能有時候首屏加載的時間就會到4秒、5秒的樣子。這很明顯是在挑戰(zhàn)用戶的耐心,按照慣例,最好能把加載時間控制在1秒左右。

2345截圖20200323140105.png

接下來小編講一下Vue性能優(yōu)化的兩個方向源碼優(yōu)化與打包優(yōu)化:

源碼優(yōu)化

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

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

3.Vue路由設置成懶加載。當首屏渲染的時候,能夠加快渲染速度。

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

5.使用keep-alive。keep-alive是Vue提供的一個比較抽象的組件,用來對組件進行緩存,從而節(jié)省性能。

打包優(yōu)化

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

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


3.減少圖片使用,因為對于網頁來說,圖片會占用很大一部分體積,所以,優(yōu)化圖片的操作可以有效的來加快加載速度。可以用一些css3的效果來代替圖片效果,或者使用雪碧圖來減少圖片的體積。
4.按需引入,咱們使用的一些第三方庫可以通過按需引入的方式加載。避免引入不需要使用的部分,無端增加項目體積。比如在使用element-ui庫的時候,可以只引入需要用到的組件。

最后總結一下,這篇文章小編大概細化了一下關于Vue的一些優(yōu)化方向,大家一定要記得,對于前端這個崗位來說,性能優(yōu)化是一個很重要的點,為了讓用戶體有更好的體驗,大家在提升自己技能的同時也要關注這些細小的方面喲~

熱門班型時間
人工智能就業(yè)班 即將爆滿
AI應用線上班 即將爆滿
UI設計全能班 即將爆滿
數(shù)據分析綜合班 即將爆滿
軟件開發(fā)全能班 爆滿開班
網絡安全運營班 爆滿開班
報名優(yōu)惠
免費試聽
課程資料
官方微信
返回頂部
培訓課程 熱門話題 站內鏈接