粗暴的项目总结 （because of part)

vue 移动端地图开发坑

Total canvas memory use exceeds the maximum limit (Safari 12)

最近在做 H5 地图开发， 用的是高德地图。vue单页应用，几个页面中有三张地图，然而地图之间的来回切换，在 ios上会导致 canvas 内存溢出，然后页面就崩了。。 解决办法就是利用 vue 的 keep-alive 缓存组件, 阻止页面的地图 canvas 重新加载，可以很大幅度减少内存溢出， 除非这个人真的一直在加载地图的很多地图canvas。

注意 使用 keep-alive 之后组件不会再重新created，mounted， 所以在切换页面的时候需要刷新的数据，请自行更新数据。

高德地图的web 定位

仔细阅读官方文档，你会知道 web 平台的定位是根据 ip 定位的。在 ios 手机端可以弹出浏览器允许定位弹窗，在安卓端却不行。那么你们需要集成安卓 SDK，请让安卓开发的人来， 请查看官方网站。因为我们公司有了，所以具体我也不知道。。?

iframe 嵌套页面左滑返回卡死

ios 不是可以手机屏幕左滑返回上一页嘛，当你的页面已经是嵌在 frame 里面，并且还有页面跳转，你左滑回去之后就，页面就卡死了，仿佛只是一张图片。无解。## 标题

有没有干货 ?

做这个项目遇到过很多大大小小的bug,总结起来却发现好像没什么总结的 = = 哦，H5 项目考虑到页面加载大小的性能问题。

• 所以项目大小也是要考虑的。没有的字体就使用默认字体，之前加入了字体文件，这个项目直接30M 了 = =。
• 然后就是组件按需加载，不要一股脑加入所有组件。
• 另外，关于css,不要使用 scoped, 这也会影响 css 的解析，还是使用模块包裹吧。
• 关于打包。最新的 webpack 4 打包配置。发现测试、预发、线上打包出来的文件大小不是一致的。 线上打包的文件，貌似会根据页面所需要的 js 文件进行按需加载，加快渲染速度。 em…具体后面再去查看了。