From e72afde366a37855e95047206e4eef0189fe9a2a Mon Sep 17 00:00:00 2001
From: Dreamacro <305009791@qq.com>
Date: Fri, 5 Jul 2019 02:01:42 +0800
Subject: [PATCH] Optimization: reduce bundle size
---
package-lock.json | 95 ++++++++++------------------------
package.json | 8 +--
src/containers/Rules/index.tsx | 17 +++---
3 files changed, 39 insertions(+), 81 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index a112459..d40edaf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1017,22 +1017,21 @@
"@types/react-router": "*"
}
},
- "@types/react-sortable-hoc": {
- "version": "0.6.5",
- "resolved": "https://registry.npmjs.org/@types/react-sortable-hoc/-/react-sortable-hoc-0.6.5.tgz",
- "integrity": "sha512-0Ms36xuds/pByIQFobwlDGPaUPSF6jOZUhOqf/0SaX/ZC0z9a/vwwWigEJomTvlshyjlKwB6JXV9TK+8keXq7w==",
+ "@types/react-virtualized-auto-sizer": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.0.tgz",
+ "integrity": "sha512-NMErdIdSnm2j/7IqMteRiRvRulpjoELnXWUwdbucYCz84xG9PHcoOrr7QfXwB/ku7wd6egiKFrzt/+QK4Imeeg==",
"dev": true,
"requires": {
"@types/react": "*"
}
},
- "@types/react-virtualized": {
- "version": "9.21.2",
- "resolved": "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.21.2.tgz",
- "integrity": "sha512-Q6geJaDd8FlBw3ilD4ODferTyVtYAmDE3d7+GacfwN0jPt9rD9XkeuPjcHmyIwTrMXuLv1VIJmRxU9WQoQFBJw==",
+ "@types/react-window": {
+ "version": "1.8.0",
+ "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.0.tgz",
+ "integrity": "sha512-+3pDwfns884TPYCCFFQObruGI1cOeVHAJ34KvyyhsFGTgCQtfR6Fhnh5TKdvATeHE2AslnU/dHx+tcfJgbhZ8Q==",
"dev": true,
"requires": {
- "@types/prop-types": "*",
"@types/react": "*"
}
},
@@ -1839,22 +1838,6 @@
"lodash.isplainobject": "^4.0.6"
}
},
- "babel-runtime": {
- "version": "6.26.0",
- "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
- "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
- "requires": {
- "core-js": "^2.4.0",
- "regenerator-runtime": "^0.11.0"
- },
- "dependencies": {
- "regenerator-runtime": {
- "version": "0.11.1",
- "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
- "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
- }
- }
- },
"bail": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/bail/-/bail-1.0.4.tgz",
@@ -2884,11 +2867,6 @@
"mimic-response": "^1.0.0"
}
},
- "clsx": {
- "version": "1.0.4",
- "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.0.4.tgz",
- "integrity": "sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg=="
- },
"coa": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
@@ -3113,11 +3091,6 @@
"integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
"dev": true
},
- "core-js": {
- "version": "2.6.9",
- "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
- "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A=="
- },
"core-js-compat": {
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.1.4.tgz",
@@ -3868,14 +3841,6 @@
"utila": "~0.4"
}
},
- "dom-helpers": {
- "version": "3.4.0",
- "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
- "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
- "requires": {
- "@babel/runtime": "^7.1.2"
- }
- },
"dom-serializer": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
@@ -6500,6 +6465,7 @@
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+ "dev": true,
"requires": {
"loose-envify": "^1.0.0"
}
@@ -7146,11 +7112,6 @@
"integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
"dev": true
},
- "linear-layout-vector": {
- "version": "0.0.1",
- "resolved": "https://registry.npmjs.org/linear-layout-vector/-/linear-layout-vector-0.0.1.tgz",
- "integrity": "sha1-OYEU1zA7bsx/1rJzr3uEAdi6nHA="
- },
"load-bmfont": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/load-bmfont/-/load-bmfont-1.4.0.tgz",
@@ -7486,6 +7447,11 @@
}
}
},
+ "memoize-one": {
+ "version": "5.0.4",
+ "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.4.tgz",
+ "integrity": "sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA=="
+ },
"memory-fs": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -9307,7 +9273,8 @@
"react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
- "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+ "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
+ "dev": true
},
"react-router": {
"version": "5.0.1",
@@ -9340,28 +9307,18 @@
"tiny-warning": "^1.0.0"
}
},
- "react-sortable-hoc": {
- "version": "1.9.1",
- "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-1.9.1.tgz",
- "integrity": "sha512-2VeofjRav8+eZeE5Nm/+b8mrA94rQ+gBsqhXi8pRBSjOWNqslU3ZEm+0XhSlfoXJY2lkgHipfYAUuJbDtCixRg==",
- "requires": {
- "@babel/runtime": "^7.2.0",
- "invariant": "^2.2.4",
- "prop-types": "^15.5.7"
- }
+ "react-virtualized-auto-sizer": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz",
+ "integrity": "sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg=="
},
- "react-virtualized": {
- "version": "9.21.1",
- "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.21.1.tgz",
- "integrity": "sha512-E53vFjRRMCyUTEKuDLuGH1ld/9TFzjf/fFW816PE4HFXWZorESbSTYtiZz1oAjra0MminaUU1EnvUxoGuEFFPA==",
+ "react-window": {
+ "version": "1.8.4",
+ "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.4.tgz",
+ "integrity": "sha512-vOWwy6gOLT/Ug5aUQt0KflxDOZppKloW1CC1oUFDEFe6TXZ02VvOV2C0gYWbCNN8MXFctSxJULoyU01zno0lyg==",
"requires": {
- "babel-runtime": "^6.26.0",
- "clsx": "^1.0.1",
- "dom-helpers": "^2.4.0 || ^3.0.0",
- "linear-layout-vector": "0.0.1",
- "loose-envify": "^1.3.0",
- "prop-types": "^15.6.0",
- "react-lifecycles-compat": "^3.0.4"
+ "@babel/runtime": "^7.0.0",
+ "memoize-one": ">=3.1.1 <6"
}
},
"read-chunk": {
diff --git a/package.json b/package.json
index 9db7a00..0d15bf0 100644
--- a/package.json
+++ b/package.json
@@ -38,8 +38,8 @@
"@types/react": "^16.8.22",
"@types/react-dom": "^16.8.4",
"@types/react-router-dom": "^4.3.4",
- "@types/react-sortable-hoc": "^0.6.5",
- "@types/react-virtualized": "^9.21.2",
+ "@types/react-virtualized-auto-sizer": "^1.0.0",
+ "@types/react-window": "^1.8.0",
"@types/yaml": "^1.0.2",
"autoprefixer": "^9.6.0",
"awesome-typescript-loader": "^5.2.1",
@@ -83,8 +83,8 @@
"react-dom": "^16.8.6",
"react-i18next": "^10.11.2",
"react-router-dom": "^5.0.1",
- "react-sortable-hoc": "^1.9.1",
- "react-virtualized": "^9.21.1",
+ "react-virtualized-auto-sizer": "^1.0.2",
+ "react-window": "^1.8.4",
"typescript": "^3.5.2",
"unstated-next": "^1.1.0",
"use-immer": "^0.3.2",
diff --git a/src/containers/Rules/index.tsx b/src/containers/Rules/index.tsx
index bbeb1b1..d999a03 100644
--- a/src/containers/Rules/index.tsx
+++ b/src/containers/Rules/index.tsx
@@ -2,7 +2,8 @@ import React, { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { Header, Card, Row, Col } from '@components'
import { containers } from '@stores'
-import { List, AutoSizer } from 'react-virtualized'
+import { FixedSizeList as List } from 'react-window'
+import AutoSizer from 'react-virtualized-auto-sizer'
import './style.scss'
export default function Rules () {
@@ -14,10 +15,10 @@ export default function Rules () {
fetch()
}, [])
- function renderRuleItem ({ index, key, style }) {
+ function renderRuleItem ({ index, style }) {
const rule = rules[index]
return (
-
+
{ rule.type }
@@ -43,11 +44,11 @@ export default function Rules () {
+ itemCount={rules.length}
+ itemSize={50}
+ >
+ { renderRuleItem }
+
)
}