From 6b3195b4ca88a33044bcd014e8c5d090710e7fbb Mon Sep 17 00:00:00 2001 From: vben Date: Sat, 12 Dec 2020 00:15:36 +0800 Subject: [PATCH] fix(comp): fix the memory overflow problem of component containing keywords --- CHANGELOG.zh_CN.md | 7 +++++++ src/components/Application/index.ts | 8 +++++-- src/components/Button/src/BasicButton.vue | 8 +++---- src/components/Container/index.ts | 12 ++++++----- src/components/CountTo/index.ts | 5 +++-- src/components/Description/index.ts | 6 +++--- src/components/Drawer/index.ts | 5 +++-- src/components/Dropdown/index.ts | 6 +++--- src/components/Excel/index.ts | 10 ++++----- src/components/Icon/index.tsx | 10 ++++++++- src/components/Loading/index.ts | 6 +++--- src/components/Markdown/index.ts | 7 +++---- src/components/Menu/index.ts | 6 ++++-- src/components/Modal/index.ts | 5 +++-- src/components/Page/index.ts | 5 +++-- src/components/Qrcode/index.ts | 7 ++++++- src/components/Scrollbar/index.ts | 5 +++-- src/components/StrengthMeter/index.tsx | 6 ++++-- src/components/Tinymce/index.ts | 5 +++-- src/components/Transition/index.ts | 3 ++- src/components/Tree/index.ts | 10 +++++++-- src/components/Upload/index.ts | 5 +++-- src/components/Verify/index.ts | 9 ++++---- src/components/VirtualScroll/index.ts | 8 ++++--- src/design/ant/btn.less | 3 +++ src/layouts/page/index.tsx | 7 ++++--- src/utils/factory/createAsyncComponent.tsx | 22 ++++++++++++++++++-- src/utils/http/axios/index.ts | 11 +++++----- src/views/demo/comp/button/index.vue | 2 +- src/views/demo/comp/scroll/VirtualScroll.vue | 12 +++++------ src/views/demo/comp/verify/index.vue | 10 ++++----- src/views/demo/excel/CustomExport.vue | 6 +++--- src/views/demo/excel/ImportExcel.vue | 8 +++---- 33 files changed, 155 insertions(+), 90 deletions(-) diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index b9a5fc32..0fd29e6b 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -4,6 +4,10 @@ - 移除左侧菜单搜索，新增顶部菜单搜索功能 +### ⚡ Performance Improvements + +- 异步引入组件 + ### 🎫 Chores - 返回顶部样式调整,避免遮住其他元素 @@ -14,6 +18,9 @@ - 修复多级路由缓存导致组件渲染多次的问题 - 修复地图图表切换后消失问题 - 修复登录成功 notify 消失问题 +- 修改 `VirtualScroll`和`ImportExcel`组件名为`VScroll`与`ImpExcel`,暂时解决含有关键字的组件在 vue 模版内使用内存溢出 +- 修复 axios 大小写问题 +- 修复按钮样式问题 ## 2.0.0-rc.13 (2020-12-10) diff --git a/src/components/Application/index.ts b/src/components/Application/index.ts index 8b4993c3..57074ccc 100644 --- a/src/components/Application/index.ts +++ b/src/components/Application/index.ts @@ -1,9 +1,13 @@ import { withInstall } from '../util'; import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; -export const AppLocalePicker = createAsyncComponent(() => import('./src/AppLocalePicker.vue')); +export const AppLocalePicker = createAsyncComponent(() => import('./src/AppLocalePicker.vue'), { + loading: true, +}); export const AppProvider = createAsyncComponent(() => import('./src/AppProvider.vue')); -export const AppSearch = createAsyncComponent(() => import('./src/search/AppSearch.vue')); +export const AppSearch = createAsyncComponent(() => import('./src/search/AppSearch.vue'), { + loading: true, +}); export const AppLogo = createAsyncComponent(() => import('./src/AppLogo.vue')); withInstall(AppLocalePicker, AppLogo, AppProvider, AppSearch); diff --git a/src/components/Button/src/BasicButton.vue b/src/components/Button/src/BasicButton.vue index 7ea10764..daf49f6e 100644 --- a/src/components/Button/src/BasicButton.vue +++ b/src/components/Button/src/BasicButton.vue @@ -1,9 +1,9 @@ @@ -27,8 +27,6 @@ postIcon: propTypes.string, }, setup(props, { attrs }) { - const getIsCircleBtn = computed(() => attrs.shape === 'circle'); - const getColor = computed(() => { const { color, disabled } = props; return { @@ -41,7 +39,7 @@ return { ...attrs, ...props }; }); - return { getBindValue, getColor, getIsCircleBtn }; + return { getBindValue, getColor }; }, }); diff --git a/src/components/Container/index.ts b/src/components/Container/index.ts index eb4e8ff6..e1131178 100644 --- a/src/components/Container/index.ts +++ b/src/components/Container/index.ts @@ -1,10 +1,12 @@ -import ScrollContainer from './src/ScrollContainer.vue'; -import CollapseContainer from './src/collapse/CollapseContainer.vue'; -import LazyContainer from './src/LazyContainer.vue'; import { withInstall } from '../util'; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; +export const ScrollContainer = createAsyncComponent(() => import('./src/ScrollContainer.vue')); +export const CollapseContainer = createAsyncComponent( + () => import('./src/collapse/CollapseContainer.vue') +); +export const LazyContainer = createAsyncComponent(() => import('./src/LazyContainer.vue')); + withInstall(ScrollContainer, CollapseContainer, LazyContainer); export * from './src/types'; - -export { ScrollContainer, CollapseContainer, LazyContainer }; diff --git a/src/components/CountTo/index.ts b/src/components/CountTo/index.ts index ec705e18..24f9e647 100644 --- a/src/components/CountTo/index.ts +++ b/src/components/CountTo/index.ts @@ -1,7 +1,8 @@ // Transform vue-count-to to support vue3 version -import CountTo from './src/index.vue'; import { withInstall } from '../util'; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; +export const CountTo = createAsyncComponent(() => import('./src/index.vue')); + withInstall(CountTo); -export { CountTo }; diff --git a/src/components/Description/index.ts b/src/components/Description/index.ts index 188e5b65..9d60038e 100644 --- a/src/components/Description/index.ts +++ b/src/components/Description/index.ts @@ -1,9 +1,9 @@ -import Description from './src/index'; - import { withInstall } from '../util'; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; +export const Description = createAsyncComponent(() => import('./src/index')); + withInstall(Description); export * from './src/types'; export { useDescription } from './src/useDescription'; -export { Description }; diff --git a/src/components/Drawer/index.ts b/src/components/Drawer/index.ts index e05b0567..28ab6eb9 100644 --- a/src/components/Drawer/index.ts +++ b/src/components/Drawer/index.ts @@ -1,7 +1,8 @@ -import BasicDrawer from './src/BasicDrawer'; import { withInstall } from '../util'; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; +export const BasicDrawer = createAsyncComponent(() => import('./src/BasicDrawer')); + withInstall(BasicDrawer); export * from './src/types'; export { useDrawer, useDrawerInner } from './src/useDrawer'; -export { BasicDrawer }; diff --git a/src/components/Dropdown/index.ts b/src/components/Dropdown/index.ts index 8f193b3d..a95b7754 100644 --- a/src/components/Dropdown/index.ts +++ b/src/components/Dropdown/index.ts @@ -1,7 +1,7 @@ -import Dropdown from './src/Dropdown'; import { withInstall } from '../util'; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; +export const Dropdown = createAsyncComponent(() => import('./src/Dropdown')); + withInstall(Dropdown); export * from './src/types'; - -export { Dropdown }; diff --git a/src/components/Excel/index.ts b/src/components/Excel/index.ts index 113066e5..ac36ff86 100644 --- a/src/components/Excel/index.ts +++ b/src/components/Excel/index.ts @@ -1,12 +1,12 @@ -import ImportExcel from './src/ImportExcel.vue'; -import ExportExcelModel from './src/ExportExcelModel.vue'; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import { withInstall } from '../util'; -withInstall(ImportExcel, ExportExcelModel); +export const ImpExcel = createAsyncComponent(() => import('./src/ImportExcel.vue')); +export const ExpExcelModel = createAsyncComponent(() => import('./src/ExportExcelModel.vue')); + +withInstall(ImpExcel, ExpExcelModel); export * from './src/types'; export { jsonToSheetXlsx, aoaToSheetXlsx } from './src/Export2Excel'; - -export { ImportExcel, ExportExcelModel }; diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx index ca8c0e43..8bf070e0 100644 --- a/src/components/Icon/index.tsx +++ b/src/components/Icon/index.tsx @@ -1,5 +1,7 @@ import './index.less'; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; + import type { PropType } from 'vue'; import { defineComponent, @@ -14,7 +16,7 @@ import { import Iconify from '@purge-icons/generated'; import { isString } from '/@/utils/is'; import { propTypes } from '/@/utils/propTypes'; -export default defineComponent({ +const Icon = defineComponent({ name: 'GIcon', props: { // icon name @@ -81,3 +83,9 @@ export default defineComponent({ ); }, }); + +export default createAsyncComponent(() => { + return new Promise((resolve) => { + resolve(Icon); + }); +}); diff --git a/src/components/Loading/index.ts b/src/components/Loading/index.ts index 91e62e01..d2b30e9c 100644 --- a/src/components/Loading/index.ts +++ b/src/components/Loading/index.ts @@ -1,9 +1,9 @@ import './src/indicator'; -import Loading from './src/index.vue'; import { withInstall } from '../util'; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; +export const Loading = createAsyncComponent(() => import('./src/index.vue')); + withInstall(Loading); export { useLoading } from './src/useLoading'; export { createLoading } from './src/createLoading'; - -export { Loading }; diff --git a/src/components/Markdown/index.ts b/src/components/Markdown/index.ts index bb061d45..1ad8a729 100644 --- a/src/components/Markdown/index.ts +++ b/src/components/Markdown/index.ts @@ -1,9 +1,8 @@ -import MarkDown from './src/index.vue'; - import { withInstall } from '../util'; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; +export const MarkDown = createAsyncComponent(() => import('./src/index.vue')); + withInstall(MarkDown); export * from './src/types'; - -export { MarkDown }; diff --git a/src/components/Menu/index.ts b/src/components/Menu/index.ts index 97b884fc..daef98bc 100644 --- a/src/components/Menu/index.ts +++ b/src/components/Menu/index.ts @@ -1,5 +1,7 @@ -import BasicMenu from './src/BasicMenu'; import { withInstall } from '../util'; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; + +export const BasicMenu = createAsyncComponent(() => import('./src/BasicMenu'), { loading: false }); + withInstall(BasicMenu); -export { BasicMenu }; diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts index 10b26ef4..8b96e646 100644 --- a/src/components/Modal/index.ts +++ b/src/components/Modal/index.ts @@ -1,10 +1,11 @@ import './src/index.less'; -import BasicModal from './src/BasicModal'; import { withInstall } from '../util'; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; + +export const BasicModal = createAsyncComponent(() => import('./src/BasicModal')); withInstall(BasicModal); export { useModalContext } from './src/useModalContext'; export { useModal, useModalInner } from './src/useModal'; export * from './src/types'; -export { BasicModal }; diff --git a/src/components/Page/index.ts b/src/components/Page/index.ts index c46b7eea..9ceda932 100644 --- a/src/components/Page/index.ts +++ b/src/components/Page/index.ts @@ -1,5 +1,6 @@ -import PageFooter from './src/PageFooter.vue'; import { withInstall } from '../util'; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; +export const PageFooter = createAsyncComponent(() => import('./src/PageFooter.vue')); + withInstall(PageFooter); -export { PageFooter }; diff --git a/src/components/Qrcode/index.ts b/src/components/Qrcode/index.ts index 9ccd00c4..6f6ed7f2 100644 --- a/src/components/Qrcode/index.ts +++ b/src/components/Qrcode/index.ts @@ -1,2 +1,7 @@ -export { default as QrCode } from './src/index.vue'; +import { withInstall } from '../util'; + +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; +export const QrCode = createAsyncComponent(() => import('./src/index.vue')); + +withInstall(QrCode); export * from './src/types'; diff --git a/src/components/Scrollbar/index.ts b/src/components/Scrollbar/index.ts index 5efa77a2..2148708e 100644 --- a/src/components/Scrollbar/index.ts +++ b/src/components/Scrollbar/index.ts @@ -2,10 +2,11 @@ * copy from element-ui */ -import Scrollbar from './src/Scrollbar'; import { withInstall } from '../util'; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; +export const Scrollbar = createAsyncComponent(() => import('./src/Scrollbar')); + withInstall(Scrollbar); -export { Scrollbar }; export type { ScrollbarType } from './src/types'; diff --git a/src/components/StrengthMeter/index.tsx b/src/components/StrengthMeter/index.tsx index 80f7a33f..e55f67ed 100644 --- a/src/components/StrengthMeter/index.tsx +++ b/src/components/StrengthMeter/index.tsx @@ -1,5 +1,7 @@ -import StrengthMeter from './src/index'; import { withInstall } from '../util'; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; + +export const StrengthMeter = createAsyncComponent(() => import('./src/index')); + withInstall(StrengthMeter); -export { StrengthMeter }; diff --git a/src/components/Tinymce/index.ts b/src/components/Tinymce/index.ts index 3dd4e2b4..0a31c55e 100644 --- a/src/components/Tinymce/index.ts +++ b/src/components/Tinymce/index.ts @@ -1,5 +1,6 @@ -import Tinymce from './src/Editor.vue'; import { withInstall } from '../util'; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; +export const Tinymce = createAsyncComponent(() => import('./src/Editor.vue')); + withInstall(Tinymce); -export { Tinymce }; diff --git a/src/components/Transition/index.ts b/src/components/Transition/index.ts index 9f8e47b4..33003623 100644 --- a/src/components/Transition/index.ts +++ b/src/components/Transition/index.ts @@ -1,4 +1,5 @@ import { createSimpleTransition, createJavascriptTransition } from './src/CreateTransition'; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import ExpandTransitionGenerator from './src/ExpandTransition'; @@ -28,4 +29,4 @@ export const ExpandXTransition = createJavascriptTransition( ExpandTransitionGenerator('', true) ); -export { default as ExpandTransition } from './src/ExpandTransition.vue'; +export const ExpandTransition = createAsyncComponent(() => import('./src/ExpandTransition.vue')); diff --git a/src/components/Tree/index.ts b/src/components/Tree/index.ts index 574d5ea2..9445da6d 100644 --- a/src/components/Tree/index.ts +++ b/src/components/Tree/index.ts @@ -1,3 +1,9 @@ -export { default as BasicTree } from './src/BasicTree'; -export * from './src/types'; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; +import { withInstall } from '../util'; + +export const BasicTree = createAsyncComponent(() => import('./src/BasicTree')); + +withInstall(BasicTree); + export type { ContextMenuItem } from '/@/hooks/web/useContextMenu'; +export * from './src/types'; diff --git a/src/components/Upload/index.ts b/src/components/Upload/index.ts index 8d7d8045..a923c2f2 100644 --- a/src/components/Upload/index.ts +++ b/src/components/Upload/index.ts @@ -1,5 +1,6 @@ -import BasicUpload from './src/BasicUpload.vue'; import { withInstall } from '../util'; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; +export const BasicUpload = createAsyncComponent(() => import('./src/BasicUpload.vue')); + withInstall(BasicUpload); -export { BasicUpload }; diff --git a/src/components/Verify/index.ts b/src/components/Verify/index.ts index cc7008cf..c26ffd34 100644 --- a/src/components/Verify/index.ts +++ b/src/components/Verify/index.ts @@ -1,9 +1,10 @@ -import BasicDragVerify from './src/DragVerify'; -import RotateDragVerify from './src/ImgRotate'; import { withInstall } from '../util'; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; + +export const BasicDragVerify = createAsyncComponent(() => import('./src/DragVerify')); +export const RotateDragVerify = createAsyncComponent(() => import('./src/ImgRotate')); + withInstall(BasicDragVerify, RotateDragVerify); export * from './src/types'; - -export { BasicDragVerify, RotateDragVerify }; diff --git a/src/components/VirtualScroll/index.ts b/src/components/VirtualScroll/index.ts index a712e2b3..d894c761 100644 --- a/src/components/VirtualScroll/index.ts +++ b/src/components/VirtualScroll/index.ts @@ -1,5 +1,7 @@ -import VirtualScroll from './src/index'; import { withInstall } from '../util'; -withInstall(VirtualScroll); -export { VirtualScroll }; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; + +export const VScroll = createAsyncComponent(() => import('./src/index')); + +withInstall(VScroll); diff --git a/src/design/ant/btn.less b/src/design/ant/btn.less index 2f3b1de7..403351f9 100644 --- a/src/design/ant/btn.less +++ b/src/design/ant/btn.less @@ -1,5 +1,8 @@ // button重置 .ant-btn { + display: inline-flex; + justify-content: center; + align-items: center; // &.ant-btn-success:not(.ant-btn-link), // &.ant-btn-error:not(.ant-btn-link), // &.ant-btn-warning:not(.ant-btn-link), diff --git a/src/layouts/page/index.tsx b/src/layouts/page/index.tsx index 1a33d56a..a5924a52 100644 --- a/src/layouts/page/index.tsx +++ b/src/layouts/page/index.tsx @@ -54,7 +54,10 @@ export default defineComponent({ renderComp() ); - return unref(getEnableTransition) ? ( + if (!unref(getEnableTransition)) { + return PageContent; + } + return ( {() => PageContent} - ) : ( - PageContent ); }, }} diff --git a/src/utils/factory/createAsyncComponent.tsx b/src/utils/factory/createAsyncComponent.tsx index 123b4f68..ee9c191a 100644 --- a/src/utils/factory/createAsyncComponent.tsx +++ b/src/utils/factory/createAsyncComponent.tsx @@ -1,6 +1,24 @@ -import { defineAsyncComponent } from 'vue'; +import { + defineAsyncComponent, + // FunctionalComponent, CSSProperties +} from 'vue'; import { Spin } from 'ant-design-vue'; import { noop } from '/@/utils/index'; + +// const Loading: FunctionalComponent<{ size: 'small' | 'default' | 'large' }> = (props) => { +// const style: CSSProperties = { +// position: 'absolute', +// display: 'flex', +// justifyContent: 'center', +// alignItems: 'center', +// }; +// return ( +//
+// +//
+// ); +// }; + interface Options { size?: 'default' | 'small' | 'large'; delay?: number; @@ -10,7 +28,7 @@ interface Options { } export function createAsyncComponent(loader: Fn, options: Options = {}) { - const { size = 'small', delay = 100, timeout = 3000, loading = true, retry = true } = options; + const { size = 'small', delay = 100, timeout = 30000, loading = false, retry = true } = options; return defineAsyncComponent({ loader, loadingComponent: loading ? : undefined, diff --git a/src/utils/http/axios/index.ts b/src/utils/http/axios/index.ts index 86c4f8e5..710a5bc0 100644 --- a/src/utils/http/axios/index.ts +++ b/src/utils/http/axios/index.ts @@ -106,7 +106,7 @@ const transform: AxiosTransform = { if (apiUrl && isString(apiUrl)) { config.url = `${apiUrl}${config.url}`; } - if (config.method === RequestEnum.GET) { + if (config.method?.toUpperCase() === RequestEnum.GET) { const now = new Date().getTime(); if (!isString(config.params)) { config.data = { @@ -157,14 +157,13 @@ const transform: AxiosTransform = { const { t } = useI18n(); errorStore.setupErrorHandle(error); const { response, code, message } = error || {}; - const msg: string = - response && response.data && response.data.error ? response.data.error.message : ''; - const err: string = error.toString(); + const msg: string = response?.data?.error ? response.data.error.message : ''; + const err: string = error?.toString(); try { if (code === 'ECONNABORTED' && message.indexOf('timeout') !== -1) { createMessage.error(t('sys.api.apiTimeoutMessage')); } - if (err && err.includes('Network Error')) { + if (err?.includes('Network Error')) { createErrorModal({ title: t('sys.api.networkException'), content: t('sys.api.networkExceptionMsg'), @@ -173,7 +172,7 @@ const transform: AxiosTransform = { } catch (error) { throw new Error(error); } - checkStatus(error.response && error.response.status, msg); + checkStatus(error?.response?.status, msg); return Promise.reject(error); }, }; diff --git a/src/views/demo/comp/button/index.vue b/src/views/demo/comp/button/index.vue index 671eccc3..7a2fef98 100644 --- a/src/views/demo/comp/button/index.vue +++ b/src/views/demo/comp/button/index.vue @@ -49,7 +49,7 @@

primary

- 主按钮 + 主按钮 禁用 loading link diff --git a/src/views/demo/comp/scroll/VirtualScroll.vue b/src/views/demo/comp/scroll/VirtualScroll.vue index bdff6b26..b23f37fd 100644 --- a/src/views/demo/comp/scroll/VirtualScroll.vue +++ b/src/views/demo/comp/scroll/VirtualScroll.vue @@ -2,26 +2,26 @@
基础滚动示例
- + - +
即使不可见，也预先加载50条数据，防止空白
- + - +