Giter Club home page Giter Club logo

2019-ncov's Introduction

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

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

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

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

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

截图

2019-ncov's People

Contributors

shfshanyue avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.