Leaflet 筆記九：vue-leaflet-mobile
vue組件化三部曲：
前言
github源碼在此，記得點星，歡迎大家fork:
https://github.com/brandonxiang/vue-leaflet-mobile
為了驅動我對vue-leaflet的開發，我決心把它應用在一個web app，也算是一個基于vue的H5SPA的demo。如果你還不是很了解vue-leaflet，Leaflet 筆記四（續）：Vue-Leaflet2.0里面有詳細的介紹。
歡迎關注我的微信公眾號。回復“實驗室”就可以看到這個web app。
構思
- 前端框架 vue
- 數據流管理 vuex
- 路由控制 vue-router
- 界面樣式 vux
在界面選型的時候，我仔細看過mint-ui和vux。考慮到微信jssdk和we-UI的界面，我選擇了vux。
功能
- 發現頁面，可以切換地點
- marker有提示信息
- 切換中英文語言
- 關于頁面
截屏
截屏
性能優化
優化一：嘗試nginx的gzip
nginx具有反向代理等特性，以此同時，vue官方腳手架本身擁有gzip文件生成，當然，更方便的是，nginx本身可以設置配置文件實現自動gzip，參考資料。
gzip優化后
優化二：壓縮文件vendor.js
$ npm run build --report
分析結果
優化三：Code Splitting
從21.88s 到 6.88s，可見在單頁面應用下懶加載拆包的重要性。
非強刷
強刷
優化五：緩存 service worker pwa
緩存后
參考閱讀
轉載，請表明出處。總目錄Awesome GIS
