/2019-ncov

全国新型冠状病毒,肺炎疫情实时省市地图

Primary LanguageJavaScript

新型冠状病毒疫情实时动态省市地图

武汉加油,众志成城,共抗疫情

最近所有人的注意力都集中在武汉的疫情上,在 丁香园肺炎疫情实时动态 中提供了疫情地图及实时权威新闻,但其中并没有省市地图。

我在每天闭门不出为国家做贡献的同时,对疫情地图做了简单的扩展,能够显示某个省的疫情以及消息播报,旨在帮助大家更加直观了解自己家乡的情况。最后提醒大家尽量不出门,出门后必戴口罩。

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 actionsalioss 自动部署,使用 github actions 的定时任务每半个小时部署一次(为了获取最新数据)。

关于部署可以参考以下两篇文章

数据来源

数据爬自丁香园,使用脚本 build-origin.js 获取数据。数据每半个小时爬取一次,直接注入到前端,因此对丁香园造成的压力很小。

另外,如果你需要更详细的数据,可以参考项目 BlankerL/DXY-2019-nCoV-Crawler

截图