Awesome
新型冠状病毒疫情实时动态省市地图
武汉加油,众志成城,共抗疫情
最近所有人的注意力都集中在武汉的疫情上,在 丁香园肺炎疫情实时动态 中提供了疫情地图及实时权威新闻,但其中并没有省市地图。
我在每天闭门不出为国家做贡献的同时,对疫情地图做了简单的扩展,能够显示某个省的疫情以及消息播报,旨在帮助大家更加直观了解自己家乡的情况。最后提醒大家尽量不出门,出门后必戴口罩。
Todo
目前打包后加载总体积 gzip 后小于 300KB,每次自动部署时间平均在一分半左右
- 需求,使用脚本自动拉取丁香园的最新数据
- 部署,添加 CICD,每半个小时部署一次 (github actions)
- 优化,配置 cdn/https/http2,优化网站加载速度
- 需求,添加省级地图
- 优化部署策略,避免白屏问题
- 添加信息汇总
- 优化打包策略,对首屏地图组件进行按需加载,加速首屏速度
- 运营,对省级信息生成独立路由,便于分享及传播
- Bugfix,修复中国各省市地级市简称与全称对应关系,如恩施,阿坝,西双版纳等
- Bugfix,修复湖北天门,潜江,仙桃为县级市的问题
- Bugfix,修复西藏,重庆多拼音问题
- Bugfix,修复客户端路由不匹配首页路径时的404行为,在微信浏览器中可能会遇到问题 (使用 alicdn rewrite 解决)
- Bugfix,解决 swr 带来的 Request Queue 时间过长的问题
- 需求,添加实时播报以及省级的实时播报
- 优化打包策略,由于丁香园数据常变,对丁香园数据抽离打包,强化永久缓存并加速部署时间
- 优化,添加 webpack bundle analyze
- 优化打包策略,对 echarts 各组件进行按需加载 (目前 gzip 后总体积不超过 200KB)
- 优化打包粗略,对 echarts 中省级地图数据进行按需加载
- 优化,压缩首图,优化网站加载速度
- 优化部署策略,对 OSS 上静态资源增量(以前是全量)配置永久缓存,加速部署时间
- 优化部署策略,对 OSS 上静态资源增量传输(类似 rsync),加速部署时间
- 优化部署策略,重复利用 npm cache,加快 npm install 速度
- 优化部署/打包策略,加快 npm run build 速度
- 运营,分享时生成图片,利于分享及传播
- 运营,添加微信分享的 API
快速开始
# 获取数据
$ node scripts/build-origin.js
$ npm start
部署
使用 github actions
与 alioss
自动部署,使用 github actions
的定时任务每半个小时部署一次(为了获取最新数据)。
关于部署可以参考以下两篇文章
数据来源
数据爬自丁香园,使用脚本 build-origin.js
获取数据。数据每半个小时爬取一次,直接注入到前端,因此对丁香园造成的压力很小。
另外,如果你需要更详细的数据,可以参考项目 BlankerL/DXY-2019-nCoV-Crawler。