JavaScript
武汉新型冠状病毒，肺炎疫情实时省市地图

武汉肺炎疫情实时动态省市地图

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

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

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

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 build-origin.js

$ npm start

数据来源

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

部署

使用 github actions 与 alioss 自动部署，使用 github actions 的定时任务每半个小时部署一次(为了获取最新数据)。