优化打包体积

README.md

@@ -2,10 +2,14 @@
 
 > 武汉加油，众志成城，共抗疫情
 
-在 [丁香园肺炎疫情实时动态](https://3g.dxy.cn/newh5/view/pneumonia?from=timeline) 中提供了疫情地图及实时权威新闻，但其中并没有省市地图。我在每天闭门不出为国家做贡献的同时，对疫情地图做了简单的扩展，旨在帮助大家更加直观了解自己家乡的情况。
+最近所有人的注意力都集中在武汉疫情上，在 [丁香园肺炎疫情实时动态](https://3g.dxy.cn/newh5/view/pneumonia?from=timeline) 中提供了疫情地图及实时权威新闻，但其中并没有省市地图。
+
+我在每天闭门不出为国家做贡献的同时，对疫情地图做了简单的扩展，能够显示某个省的疫情以及消息播报，旨在帮助大家更加直观了解自己家乡的情况。最后提醒大家尽量不出门，出门后必戴口罩。
 
 ## Todo
 
+> 目前打包后加载总体积 gzip 后小于 300KB
+
 + [x] 需求，使用脚本自动拉取丁香园的最新数据
 + [x] 部署，添加 CICD，每半个小时部署一次 (github actions)
 + [x] 优化，配置 cdn/https/http2，优化网站加载速度
@@ -21,12 +25,14 @@
 + [x] Bugfix，解决 swr 带来的 Request Queue 时间过长的问题
 + [x] 需求，添加实时播报以及省级的实时播报
 + [x] 优化打包策略，由于丁香园数据常变，对丁香园数据抽离打包，强化永久缓存并加速部署时间
++ [x] 优化，添加 webpack bundle analyze
++ [x] 优化打包策略，对 echarts 各组件进行按需加载 (目前 gzip 后总体积不超过 200KB)
++ [x] 优化打包粗略，对 echarts 中省级地图数据进行按需加载
 + [ ] 优化部署策略，对 OSS 上静态资源增量(以前是全量)配置永久缓存，加速部署时间
 + [ ] 优化部署策略，对 OSS 上静态资源增量传输（类似 rsync），加速部署时间
 + [ ] 优化部署策略，重复利用 npm cache，加快 npm install 速度
 + [ ] 优化部署/打包策略，加快 npm run build 速度
-+ [ ] 优化打包策略，对 echarts 各组件进行按需加载
-+ [ ] 优化打包粗略，对 echarts 中省级地图数据进行按需加载
++ [ ] 优化打包策略，压缩首图
 + [ ] 运营，分享时生成图片，利于分享及传播
 + [ ] 运营，添加微信分享的 API
 

config/webpack.config.js

@@ -24,6 +24,7 @@ const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
 const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 const postcssNormalize = require('postcss-normalize');
 
@@ -664,6 +665,7 @@ module.exports = function(webpackEnv) {
           // The formatter is invoked directly in WebpackDevServerUtils during development
           formatter: isEnvProduction ? typescriptFormatter : undefined,
         }),
+        process.env.ANALYZE && new BundleAnalyzerPlugin()
     ].filter(Boolean),
     // Some libraries import Node modules but don't use them in the browser.
     // Tell Webpack to provide empty mocks for them so importing them works.

package.json

@@ -72,7 +72,7 @@
     "workbox-webpack-plugin": "4.3.1"
   },
   "scripts": {
-    "analyze": "source-map-explorer 'build/static/js/*'",
+    "analyze": "ANALYZE=1 npm run build",
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js"
@@ -93,7 +93,8 @@
     ]
   },
   "devDependencies": {
-    "province-city-china": "^5.0.2"
+    "province-city-china": "^5.0.2",
+    "webpack-bundle-analyzer": "^3.6.0"
   },
   "jest": {
     "roots": [

src/App.css

@@ -99,7 +99,7 @@ a {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 3rem;
+  height: 300px;
 }
 
 .info a {

src/Map.js

@@ -1,12 +1,27 @@
-import React from 'react'
-import ReactEcharts from 'echarts-for-react'
+import React, { useEffect, useState } from 'react'
+import ReactEcharts from 'echarts-for-react/lib/core'
+import echarts from 'echarts/lib/echarts'
 
-import 'echarts/map/js/china.js'
+import 'echarts/lib/chart/map'
+import 'echarts/lib/component/visualMap'
 
 function Map ({ province, data, onClick }) {
-  if (province) {
-    require(`echarts/map/js/province/${province.pinyin}`)
-  }
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    setLoading(true)
+    if (province) {
+      import(`echarts/map/json/province/${province.pinyin}.json`).then(map => {
+        echarts.registerMap(province.pinyin, map.default)
+        setLoading(false)
+      })
+    } else {
+      import(`echarts/map/json/china.json`).then(map => {
+        echarts.registerMap('china', map.default)
+        setLoading(false)
+      })
+    }
+  }, [province])
 
   const getOption = () => {
     return {
@@ -60,7 +75,7 @@ function Map ({ province, data, onClick }) {
           // margin: 8,
           fontSize: 6
         },
-        mapType: province ? province.name : 'china',
+        mapType: province ? province.pinyin : 'china',
         data,
         zoom: 1.2,
         roam: false,
@@ -76,11 +91,17 @@ function Map ({ province, data, onClick }) {
     }
   }
   return (
-    <ReactEcharts option={getOption()} lazyUpdate={true} onEvents={{
-      click (e) {
-        onClick(e.name)
-      }
-    }} />
+    loading ? <div className="loading">地图正在加载中...</div> :
+    <ReactEcharts
+      echarts={echarts}
+      option={getOption()}
+      lazyUpdate={true}
+      onEvents={{
+        click (e) {
+          onClick(e.name)
+        }
+      }}
+    />
   )
 }