vue項目優化

vue項目經常使用優化手段

一、打包優化

• 提取組件的 CSS 到單獨到文件
• 屏蔽 sourceMap
• 開啓 gzip 壓縮
• 公共庫使用cdn外鏈
  • 打包vender時不打包vue、vuex、vue-router、axios等，換用國內的 bootcdn、unpkg 直接引入到根目錄的 index.html 中。並把上述文件配置在externals中。

二、源碼優化

• template
  • 不要在模板裏面寫過多表達式
  • v-for 增長 key
  • v-show、v-if 的使用
  • 善用 v-once
  • 圖片資源按需加載（vue-lazyload）
  • 善於運用事件代理
• script
  • 在created鉤子裏面請求數據
  • Promise.all() 併發請求
  • 使用 Object.freeze() 來取消 Observer觀察
  • 減小watch的數據，慎用 deep watch
  • 善用 web Storage（sessionStorage、localStorage）
• 組件緩存（keep-alive）
• 第三方庫按需加載（不用加載整個庫）
• 路由組件懶加載 import()

三、用戶體驗優化

• fastclick 防止300ms延遲
• 菊花loading
• 骨架屏加載
• 首屏直出
• 服務端渲染（SSR）

四、通用前端優化

這裏參考個人另一篇文章：前端性能優化（最全總結）