Leaflet 笔记九:vue-leaflet-mobile

Leaflet 笔记九:vue-leaflet-mobile

vue组件化三部曲:

  • Leaflet 笔记四(续):Vue-Leaflet2.0
  • Leaflet 笔记九:vue-leaflet-mobile
  • Cordova笔记二:vue-leaflet-cordova的创建

前言

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有提示信息
  • 切换中英文语言
  • 关于页面

截屏

Leaflet 笔记九:vue-leaflet-mobile_第1张图片
截屏

性能优化

优化一:尝试nginx的gzip

nginx具有反向代理等特性,以此同时,vue官方脚手架本身拥有gzip文件生成,当然,更方便的是,nginx本身可以设置配置文件实现自动gzip,参考资料。

gzip优化后

优化二:压缩文件vendor.js

$ npm run build --report
Leaflet 笔记九:vue-leaflet-mobile_第2张图片
分析结果

优化三:Code Splitting

从21.88s 到 6.88s,可见在单页面应用下懒加载拆包的重要性。

非强刷
强刷

优化五:缓存 service worker pwa

缓存后

参考阅读

  • 如何写一手漂亮的 Vue
  • 关于 webpack 打包后文件过大的那些事

转载,请表明出处。总目录Awesome GIS

你可能感兴趣的:(Leaflet 笔记九:vue-leaflet-mobile)