Vue眾所周知，是一個輕量級的框架，源碼僅僅為72.9KB，但是也有它自己的缺點，就是首屏加載會比較慢，因為和傳統項目相比，Vue會在首屏加載的時候加載出所有的組件和插件，並且向服務器請求數據，導致可能有時候首屏加載的時間就會到4、5秒的樣子。
但是這樣做很明顯是在挑戰用戶的耐心，按照慣例，最好能把加載時間控制在1秒左右。接下來小編講一下Vue性能優化的兩個個方向。
一．源碼優化
1、代碼模塊化，咱們可以把很多常用的地方封裝成單獨的組件，在需要用到的地方引用，而不是寫過多重復的代碼，每一個組件都要明確含義，復用性越高越好，可配置型越強越好，包括咱們的css也可以通過less和sass的自定義css變量來減少重復代碼。
2、for循環設置key值，在用v-for進行數據遍歷渲染的時候，為每一項都設置唯一的key值，為了讓Vue內部核心代碼能更快地找到該條數據，當舊值和新值去對比的時候，可以更快的定位到diff。
3、Vue路由設置成懶加載，當首屏渲染的時候，能夠加快渲染速度。
4、更加理解Vue的生命周期，不要造成內部泄漏，使用過后的全局變量在組件銷毀后重新置為null。
5、可以使用keep-alive，keep-alive是Vue提供的一個比較抽象的組件，用來對組件進行緩存，從而節省性能。
二．打包優化
1、修改vue.config.js中的配置項，把productionSourceMap設置為false，不然最終打包過后會生成一些map文件，如果不關掉，生成環境是可以通過map去查看源碼的，並且可以開啟gzip壓縮，使打包過后體積變小。
2、使用cdn的方式外部加載一些資源，比如vue-router、axios等Vue的周邊插件，在webpack.config.js里面，externals里面設置一些不必要打包的外部引用模塊。然后在入門文件index.html里面通過cdn的方式去引入需要的插件。
3、減少圖片使用，因為對於網頁來說，圖片會占用很大一部分體積，所以，優化圖片的操作可以有效的來加快加載速度。可以用一些css3的效果來代替圖片效果，或者使用雪碧圖來減少圖片的體積。
4、按需引入，咱們使用的一些第三方庫可以通過按需引入的方式加載。避免引入不需要使用的部分，無端增加項目體積。比如在使用element-ui庫的時候，可以只引入需要用到的組件。
三、總結
這篇文章小編大概細化了一下關於Vue的一些優化方向，大家一定要記得，對於前端這個崗位來說，性能優化是一個很重要的點，為了讓用戶體有更好的體驗，大家在提升自己技能的同時也要關注這些細小的方面~