mirror of
https://github.com/woodchen-ink/clash-and-dashboard.git
synced 2025-07-18 14:01:56 +08:00
Optimization: reduce bundle size
This commit is contained in:
Dreamacro
parent
0fe722d28d
commit
e72afde366
95
package-lock.json
generated
95
package-lock.json
generated
@ -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": {
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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}
|
||||
rowRenderer={renderRuleItem}
|
||||
rowHeight={50}
|
||||
overscanRowCount={10}
|
||||
/>
|
||||
itemCount={rules.length}
|
||||
itemSize={50}
|
||||
>
|
||||
{ renderRuleItem }
|
||||
</List>
|
||||
)
|
||||
}
|
||||
</AutoSizer>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user