From bba7768759c5d4dedd6599417154c4cb8ab64920 Mon Sep 17 00:00:00 2001 From: Vben Date: Fri, 26 Feb 2021 00:15:18 +0800 Subject: [PATCH] perf: replace crypto-es with crypto-js --- CHANGELOG.zh_CN.md | 1 + build/vite/plugin/visualizer.ts | 4 +++ package.json | 9 +++--- src/components/Scrollbar/src/index.vue | 36 +++++++++++++----------- src/design/public.less | 17 ++++++++---- src/router/routes/index.ts | 2 +- src/utils/cache/aesEncryption.ts | 38 ++++++++++++++++++++++++++ src/utils/cache/index.ts | 4 ++- src/utils/cache/storageCache.ts | 12 ++++---- src/utils/encryption/aesEncryption.ts | 35 ------------------------ src/utils/helper/envHelper.ts | 9 ------ src/views/demo/main-out/index.vue | 22 +++------------ yarn.lock | 21 ++++++++------ 13 files changed, 108 insertions(+), 102 deletions(-) create mode 100644 src/utils/cache/aesEncryption.ts delete mode 100644 src/utils/encryption/aesEncryption.ts delete mode 100644 src/utils/helper/envHelper.ts diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index f3c35ea4..126feee2 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -9,6 +9,7 @@ - 登录界面动画优化 - 修复 github 仓库体积过大问题. - 默认隐藏表格全屏按钮 +- `crypto-es`改为`crypto-js`，减小打包体积 ### 🐛 Bug Fixes diff --git a/build/vite/plugin/visualizer.ts b/build/vite/plugin/visualizer.ts index a0e2c343..59a3b7e5 100644 --- a/build/vite/plugin/visualizer.ts +++ b/build/vite/plugin/visualizer.ts @@ -9,6 +9,10 @@ export function configVisualizerConfig() { return visualizer({ filename: './node_modules/.cache/visualizer/stats.html', open: true, + // @ts-ignore + gzipSize: true, + // @ts-ignore + brotliSize: true, }) as Plugin; } return []; diff --git a/package.json b/package.json index d62eb2a8..9d3df514 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "ant-design-vue": "2.0.0", "apexcharts": "^3.25.0", "axios": "^0.21.1", - "crypto-es": "^1.2.7", + "crypto-js": "^4.0.0", "echarts": "^5.0.2", "lodash-es": "^4.17.21", "mockjs": "^1.1.0", @@ -49,11 +49,12 @@ "xlsx": "^0.16.9" }, "devDependencies": { - "@commitlint/cli": "^12.0.0", - "@commitlint/config-conventional": "^12.0.0", + "@commitlint/cli": "^12.0.1", + "@commitlint/config-conventional": "^12.0.1", "@iconify/json": "^1.1.308", "@ls-lint/ls-lint": "^1.9.2", "@purge-icons/generated": "^0.7.0", + "@types/crypto-js": "^4.0.1", "@types/fs-extra": "^9.0.7", "@types/http-proxy": "^1.17.5", "@types/lodash-es": "^4.17.4", @@ -102,7 +103,7 @@ "vite-plugin-imagemin": "^0.2.8", "vite-plugin-mock": "^2.1.5", "vite-plugin-purge-icons": "^0.7.0", - "vite-plugin-pwa": "^0.5.3", + "vite-plugin-pwa": "^0.5.4", "vite-plugin-style-import": "^0.7.5", "vite-plugin-theme": "^0.4.8", "vite-plugin-windicss": "0.5.0", diff --git a/src/components/Scrollbar/src/index.vue b/src/components/Scrollbar/src/index.vue index a66b9bf6..fee65ee5 100644 --- a/src/components/Scrollbar/src/index.vue +++ b/src/components/Scrollbar/src/index.vue @@ -29,6 +29,7 @@ nextTick, provide, computed, + unref, } from 'vue'; import Bar from './bar'; @@ -73,18 +74,25 @@ provide('scroll-bar-wrap', wrap); + const style = computed(() => { + if (Array.isArray(props.wrapStyle)) { + return toObject(props.wrapStyle); + } + return props.wrapStyle; + }); + const handleScroll = () => { if (!props.native) { - moveY.value = (wrap.value.scrollTop * 100) / wrap.value.clientHeight; - moveX.value = (wrap.value.scrollLeft * 100) / wrap.value.clientWidth; + moveY.value = (unref(wrap).scrollTop * 100) / unref(wrap).clientHeight; + moveX.value = (unref(wrap).scrollLeft * 100) / unref(wrap).clientWidth; } }; const update = () => { - if (!wrap.value) return; + if (!unref(wrap)) return; - const heightPercentage = (wrap.value.clientHeight * 100) / wrap.value.scrollHeight; - const widthPercentage = (wrap.value.clientWidth * 100) / wrap.value.scrollWidth; + const heightPercentage = (unref(wrap).clientHeight * 100) / unref(wrap).scrollHeight; + const widthPercentage = (unref(wrap).clientWidth * 100) / unref(wrap).scrollWidth; sizeHeight.value = heightPercentage < 100 ? heightPercentage + '%' : ''; sizeWidth.value = widthPercentage < 100 ? widthPercentage + '%' : ''; @@ -94,25 +102,21 @@ if (props.native) return; nextTick(update); if (!props.noresize) { - addResizeListener(resize.value, update); - addResizeListener(wrap.value, update); + addResizeListener(unref(resize), update); + addResizeListener(unref(wrap), update); + addEventListener('resize', update); } }); onBeforeUnmount(() => { if (props.native) return; if (!props.noresize) { - removeResizeListener(resize.value, update); - removeResizeListener(wrap.value, update); + removeResizeListener(unref(resize), update); + removeResizeListener(unref(wrap), update); + removeEventListener('resize', update); } }); - const style = computed(() => { - let style: any = props.wrapStyle; - if (Array.isArray(props.wrapStyle)) { - style = toObject(props.wrapStyle); - } - return style; - }); + return { moveX, moveY, diff --git a/src/design/public.less b/src/design/public.less index a07447fb..46697a83 100644 --- a/src/design/public.less +++ b/src/design/public.less @@ -6,19 +6,26 @@ // ================================= // ==============scrollbar========== // ================================= + ::-webkit-scrollbar { - width: 6px; - height: 6px; + width: 8px; + height: 10px; } +// ::-webkit-scrollbar-track { +// background: transparent; +// } + ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); } ::-webkit-scrollbar-thumb { - background: rgba(0, 0, 0, 0.2); - border-radius: 4px; - box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); + background: rgba(0, 0, 0, 0.6); + background-color: rgba(144, 147, 153, 0.3); + // background-color: rgba(144, 147, 153, 0.3); + border-radius: 2px; + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2); } ::-webkit-scrollbar-thumb:hover { diff --git a/src/router/routes/index.ts b/src/router/routes/index.ts index 7ccea7c6..281744ab 100644 --- a/src/router/routes/index.ts +++ b/src/router/routes/index.ts @@ -36,5 +36,5 @@ export const LoginRoute: AppRouteRecordRaw = { }, }; -// 基础路由 不用权限 +// Basic routing without permission export const basicRoutes = [LoginRoute, RootRoute, ...mainOutRoutes, REDIRECT_ROUTE]; diff --git a/src/utils/cache/aesEncryption.ts b/src/utils/cache/aesEncryption.ts new file mode 100644 index 00000000..d77f1bbd --- /dev/null +++ b/src/utils/cache/aesEncryption.ts @@ -0,0 +1,38 @@ +import type { lib } from 'crypto-js'; + +import { encrypt, decrypt } from 'crypto-js/aes'; +import Uft8, { parse } from 'crypto-js/enc-utf8'; +import pkcs7 from 'crypto-js/pad-pkcs7'; + +export interface EncryptionParams { + key: string; + iv: string; +} + +export class Encryption { + private key: lib.WordArray; + private iv: lib.WordArray; + + constructor(opt: EncryptionParams) { + const { key, iv } = opt; + this.key = parse(key); + this.iv = parse(iv); + } + + get getOptions() { + return { + // mode: mode.CBC, + padding: pkcs7, + iv: this.iv, + }; + } + + encryptByAES(str: string) { + return encrypt(str, this.key, this.getOptions).toString(); + } + + decryptByAES(str: string) { + return decrypt(str, this.key, this.getOptions).toString(Uft8); + } +} +export default Encryption; diff --git a/src/utils/cache/index.ts b/src/utils/cache/index.ts index b7006d09..0eedcc98 100644 --- a/src/utils/cache/index.ts +++ b/src/utils/cache/index.ts @@ -1,6 +1,7 @@ -import { getStorageShortName } from '/@/utils/helper/envHelper'; +import { getStorageShortName } from '/@/utils/env'; import { createStorage as create } from './storageCache'; import { enableStorageEncryption } from '/@/settings/encryptionSetting'; +import { DEFAULT_CACHE_TIME } from '/@/settings/encryptionSetting'; const createOptions = (storage = sessionStorage) => { return { @@ -8,6 +9,7 @@ const createOptions = (storage = sessionStorage) => { hasEncrypt: enableStorageEncryption, storage, prefixKey: getStorageShortName(), + timeout: DEFAULT_CACHE_TIME, }; }; diff --git a/src/utils/cache/storageCache.ts b/src/utils/cache/storageCache.ts index d5cb61c2..bc30b451 100644 --- a/src/utils/cache/storageCache.ts +++ b/src/utils/cache/storageCache.ts @@ -1,19 +1,21 @@ -import { DEFAULT_CACHE_TIME } from '/@/settings/encryptionSetting'; import { cacheCipher } from '/@/settings/encryptionSetting'; -import Encryption, { EncryptionParams } from '/@/utils/encryption/aesEncryption'; + +import Encryption, { EncryptionParams } from './aesEncryption'; export interface CreateStorageParams extends EncryptionParams { + prefixKey: string; storage: Storage; - hasEncrypt: boolean; + timeout?: Nullable; } export const createStorage = ({ prefixKey = '', storage = sessionStorage, key = cacheCipher.key, iv = cacheCipher.iv, + timeout = null, hasEncrypt = true, -} = {}) => { +}: Partial = {}) => { if (hasEncrypt && [key.length, iv.length].some((item) => item !== 16)) { throw new Error('When hasEncrypt is true, the key or iv must be 16 bits!'); } @@ -54,7 +56,7 @@ export const createStorage = ({ * @expire Expiration time in seconds * @memberof Cache */ - set(key: string, value: any, expire: number | null = DEFAULT_CACHE_TIME) { + set(key: string, value: any, expire: number | null = timeout) { const stringData = JSON.stringify({ value, expire: expire !== null ? new Date().getTime() + expire * 1000 : null, diff --git a/src/utils/encryption/aesEncryption.ts b/src/utils/encryption/aesEncryption.ts deleted file mode 100644 index 69e2fe62..00000000 --- a/src/utils/encryption/aesEncryption.ts +++ /dev/null @@ -1,35 +0,0 @@ -import CryptoES from 'crypto-es'; - -export interface EncryptionParams { - key: string; - iv: string; -} - -export class Encryption { - private key; - - private iv; - - constructor(opt: EncryptionParams) { - const { key, iv } = opt; - this.key = CryptoES.enc.Utf8.parse(key); - this.iv = CryptoES.enc.Utf8.parse(iv); - } - - get getOptions(): CryptoES.lib.CipherCfg { - return { - mode: CryptoES.mode.CBC, - padding: CryptoES.pad.Pkcs7, - iv: this.iv, - }; - } - - encryptByAES(str: string) { - return CryptoES.AES.encrypt(str, this.key, this.getOptions).toString(); - } - - decryptByAES(str: string) { - return CryptoES.AES.decrypt(str, this.key, this.getOptions).toString(CryptoES.enc.Utf8); - } -} -export default Encryption; diff --git a/src/utils/helper/envHelper.ts b/src/utils/helper/envHelper.ts deleted file mode 100644 index 68be4299..00000000 --- a/src/utils/helper/envHelper.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { getEnv } from '/@/utils/env'; -import { useGlobSetting } from '/@/hooks/setting'; -import pkg from '../../../package.json'; -const globSetting = useGlobSetting(); - -// Generate cache key according to version -export function getStorageShortName() { - return `${globSetting.shortName}__${getEnv()}${`__${pkg.version}`}__`.toUpperCase(); -} diff --git a/src/views/demo/main-out/index.vue b/src/views/demo/main-out/index.vue index 09defdb8..7125067f 100644 --- a/src/views/demo/main-out/index.vue +++ b/src/views/demo/main-out/index.vue @@ -1,20 +1,6 @@ - - - diff --git a/yarn.lock b/yarn.lock index fb40a6d1..9112e0e4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1298,6 +1298,11 @@ ejs "^2.6.1" magic-string "^0.25.0" +"@types/crypto-js@^4.0.1": + version "4.0.1" + resolved "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.0.1.tgz#3a4bd24518b0e6c5940da4e2659eeb2ef0806963" + integrity sha512-6+OPzqhKX/cx5xh+yO8Cqg3u3alrkhoxhE5ZOdSEv0DOzJ13lwJ6laqGU0Kv6+XDMFmlnGId04LtY22PsFLQUw== + "@types/estree@0.0.39": version "0.0.39" resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f" @@ -3025,10 +3030,10 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2: shebang-command "^2.0.0" which "^2.0.1" -crypto-es@^1.2.7: - version "1.2.7" - resolved "https://registry.npmjs.org/crypto-es/-/crypto-es-1.2.7.tgz#754a6d52319a94fb4eb1f119297f17196b360f88" - integrity sha512-UUqiVJ2gUuZFmbFsKmud3uuLcNP2+Opt+5ysmljycFCyhA0+T16XJmo1ev/t5kMChMqWh7IEvURNCqsg+SjZGQ== +crypto-js@^4.0.0: + version "4.0.0" + resolved "https://registry.npmjs.org/crypto-js/-/crypto-js-4.0.0.tgz#2904ab2677a9d042856a2ea2ef80de92e4a36dcc" + integrity sha512-bzHZN8Pn+gS7DQA6n+iUmBfl0hO5DJq++QP3U6uTucDtk/0iGpXd/Gg7CGR0p8tJhofJyaKoWBuJI4eAO00BBg== crypto-random-string@^2.0.0: version "2.0.0" @@ -8930,10 +8935,10 @@ vite-plugin-purge-icons@^0.7.0: "@purge-icons/generated" "^0.7.0" rollup-plugin-purge-icons "^0.7.0" -vite-plugin-pwa@^0.5.3: - version "0.5.3" - resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.5.3.tgz#60d97d62335846144c8e6b6a911704d6c0f75171" - integrity sha512-xGh0gIgzczvYNj8ED5HhpJ2iT5kMiieim2qI8kT/3+rfo83hTyuzhEICkljIbhausvOaGxtzLKWE8RS6cUg0Fw== +vite-plugin-pwa@^0.5.4: + version "0.5.4" + resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.5.4.tgz#ce6fb85da140359057290e5eba3c22548392bea5" + integrity sha512-Zcr190GixdvvHBS1poTevtuw0irRvRi9rLFdXUbkPyY5hozQ+JhR8i/ORRvl6a9wV6Gl/mVwJ3IaY5IjTf3zFw== dependencies: debug "^4.3.2" fast-glob "^3.2.5"