Optimization: reduce bundle size

package-lock.json

@@ -1017,22 +1017,21 @@
                 "@types/react-router": "*"
             }
         },
-        "@types/react-sortable-hoc": {
+        "@types/react-virtualized-auto-sizer": {
-            "version": "0.6.5",
+            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/@types/react-sortable-hoc/-/react-sortable-hoc-0.6.5.tgz",
+            "resolved": "https://registry.npmjs.org/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.0.tgz",
-            "integrity": "sha512-0Ms36xuds/pByIQFobwlDGPaUPSF6jOZUhOqf/0SaX/ZC0z9a/vwwWigEJomTvlshyjlKwB6JXV9TK+8keXq7w==",
+            "integrity": "sha512-NMErdIdSnm2j/7IqMteRiRvRulpjoELnXWUwdbucYCz84xG9PHcoOrr7QfXwB/ku7wd6egiKFrzt/+QK4Imeeg==",
             "dev": true,
             "requires": {
                 "@types/react": "*"
             }
         },
-        "@types/react-virtualized": {
+        "@types/react-window": {
-            "version": "9.21.2",
+            "version": "1.8.0",
-            "resolved": "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.21.2.tgz",
+            "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.0.tgz",
-            "integrity": "sha512-Q6geJaDd8FlBw3ilD4ODferTyVtYAmDE3d7+GacfwN0jPt9rD9XkeuPjcHmyIwTrMXuLv1VIJmRxU9WQoQFBJw==",
+            "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": {
+        "react-virtualized-auto-sizer": {
-            "version": "1.9.1",
+            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-1.9.1.tgz",
+            "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz",
-            "integrity": "sha512-2VeofjRav8+eZeE5Nm/+b8mrA94rQ+gBsqhXi8pRBSjOWNqslU3ZEm+0XhSlfoXJY2lkgHipfYAUuJbDtCixRg==",
+            "integrity": "sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg=="
-            "requires": {
-                "@babel/runtime": "^7.2.0",
-                "invariant": "^2.2.4",
-                "prop-types": "^15.5.7"
-            }
         },
-        "react-virtualized": {
+        "react-window": {
-            "version": "9.21.1",
+            "version": "1.8.4",
-            "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.21.1.tgz",
+            "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.4.tgz",
-            "integrity": "sha512-E53vFjRRMCyUTEKuDLuGH1ld/9TFzjf/fFW816PE4HFXWZorESbSTYtiZz1oAjra0MminaUU1EnvUxoGuEFFPA==",
+            "integrity": "sha512-vOWwy6gOLT/Ug5aUQt0KflxDOZppKloW1CC1oUFDEFe6TXZ02VvOV2C0gYWbCNN8MXFctSxJULoyU01zno0lyg==",
             "requires": {
-                "babel-runtime": "^6.26.0",
+                "@babel/runtime": "^7.0.0",
-                "clsx": "^1.0.1",
+                "memoize-one": ">=3.1.1 <6"
-                "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"
             }
         },
         "read-chunk": {

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-auto-sizer": "^1.0.0",
-        "@types/react-virtualized": "^9.21.2",
+        "@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-auto-sizer": "^1.0.2",
-        "react-virtualized": "^9.21.1",
+        "react-window": "^1.8.4",
         "typescript": "^3.5.2",
         "unstated-next": "^1.1.0",
         "use-immer": "^0.3.2",

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 (
-            <li className="rule-item" key={key} style={style}>
+            <li className="rule-item" style={style}>
                 <Row className="rule-item-row" gutter={24} align="middle">
                     <Col className="rule-type" span={6} offset={1}>
                         { rule.type }
@@ -43,11 +44,11 @@ export default function Rules () {
                             <List
                                 height={height}
                                 width={width}
-                                rowCount={rules.length}
+                                itemCount={rules.length}
-                                rowRenderer={renderRuleItem}
+                                itemSize={50}
-                                rowHeight={50}
+                            >
-                                overscanRowCount={10}
+                                { renderRuleItem }
-                            />
+                            </List>
                         )
                     }
                 </AutoSizer>