feat: 1

config/config.js

@@ -43,13 +43,11 @@ export default defineConfig({
   targets: {
     ie: 11
   },
-  // terserOptions: {
-  //   compress: {
-  //     drop_console: NODE_ENV === 'production' ? true : false,
-  //     drop_debugger: NODE_ENV === 'production' ? true : false
-  //   }
+  // externals: {
+  //   'react': 'window.React',
+  //   'react-dom': 'window.ReactDOM',
   // },
-  // umi routes: https://umijs.org/docs/routing
+
   routes,
   // Theme for antd: https://ant.design/docs/react/customize-theme-cn
   theme: {
@@ -78,6 +76,14 @@ export default defineConfig({
         camel2DashComponentName: false
       },
       '@icon-park/react'
+    ],
+    [
+      'import',
+      {
+        libraryName: 'antd',
+        libraryDirectory: 'es',
+        style: 'css'
+      }
     ]
   ],
   chainWebpack(config) {
@@ -96,23 +102,9 @@ export default defineConfig({
             cacheGroups: {
               vendor: {
                 name: 'vendors',
-                test: ({ resource }) => /^.(?=lodash-es|antd|react).$/.test(resource),
+                test: ({ resource }) => /^.(?=react).$/.test(resource),
                 chunks: 'all',
                 priority: 20
-              },
-              antd: {
-                name: 'antd',
-                test: ({ resource }) => /^.antd.$/.test(resource),
-                chunks: 'all',
-                priority: 10,
-                reuseExistingChunk: true
-              },
-              markdown: {
-                name: 'markdown',
-                test: ({ resource }) => /^.(?=react-markdown|vditor).$/.test(resource),
-                chunks: 'all',
-                priority: 9,
-                reuseExistingChunk: true
               }
             }
           }

src/app.tsx

@@ -10,8 +10,9 @@ import { tryChangeWorkStatus } from './components/RightContent/Book'
 import { getAuthCache, setAuthCache } from './utils/auth'
 import { LAYOUT_COLLAPSED_KEY } from './utils/cache/cacheEnum'
 import consts from './consts'
-import ModalStore from './components/ModalStore'
+import ModalStore from './components/ModalStore/import'
 import { stringify } from 'qs'
+import MessageDetail from './pages/Hr/Notification/components/MessageDetail'
 
 const loginPath = '/user/login'
 
@@ -40,14 +41,6 @@ export async function getInitialState() {
   if (history.location.pathname !== loginPath) {
     const userInfo = (await fetchUserInfo()) || {}
     const permData = (await fetchPermData()) || {}
-
-    // if (userInfo?.currentUser?.staffId) {
-    //   const { username, staffId: id, wsToken: token } = userInfo?.currentUser
-    //   ws.init(`ws://cld2qa.com/summon/v1/chat/link?username=${username}&id=${id}&token=${token}`, {
-    //     onMessage
-    //   })
-    // }
-
     const collapsed = getAuthCache(LAYOUT_COLLAPSED_KEY) || false
     return {
       fetchUserInfo,
@@ -73,7 +66,7 @@ export const layout = ({ initialState, setInitialState }) => {
   return {
     logo,
     rightContentRender: () => (
-      <ModalStore>
+      <ModalStore _modalMap={{ D_NOTICE_DETAIL: MessageDetail }}>
         <RightContent />
       </ModalStore>
     ),

src/components/ModalStore/import.ts

@@ -0,0 +1,9 @@
+import { dynamic } from 'umi'
+
+export default dynamic({
+  loader: async function () {
+    // 这里的注释 webpackChunkName 可以指导 webpack 将该组件 HugeA 以这个名字单独拆出去
+    const { default: ModalStore } = await import(/* webpackChunkName: "external_modal_store" */ './index.tsx')
+    return ModalStore
+  }
+})

src/components/ModalStore/index.tsx

@@ -23,6 +23,7 @@ import CloudDetail from '@/pages/Product/Cloud/components/Detail'
 import PersonalDetail from '@/pages/Product/Road/Personal/components/Detail'
 import EnterpriseDetail from '@/pages/Product/Road/Enterprise/components/Detail'
 import AddEnterprise from '@/pages/Product/Road/Enterprise/components/AddEnterprise'
+import type { ModalConfigMap } from './src/CreateProvider'
 const modalMap = {
   M_CLIENT_ADD: AddClient, // 添加客户弹窗
   M_COMPANY_ADD: AddCompany, // 添加单位弹窗
@@ -51,8 +52,14 @@ const modalMap = {
 
 export const useModal = createModalHook<typeof modalMap>()
 
-export default ({ children }: { children: React.ReactChildren }) => (
-  <ModalStore modalMap={modalMap} destroyOnClose="afterClose">
+export default ({
+  children,
+  _modalMap = modalMap
+}: {
+  children: React.ReactChildren
+  _modalMap: ModalConfigMap
+}) => (
+  <ModalStore modalMap={_modalMap} destroyOnClose="afterClose">
     {children}
   </ModalStore>
 )

src/pages/Hr/Notification/components/MarkDown/MarkDown.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import ReactMarkDown from 'react-markdown'
+const MarkDownRender = ({ children }) => {
+  return <ReactMarkDown>{children}</ReactMarkDown>
+}
+
+export default MarkDownRender

src/pages/Hr/Notification/components/MarkDown/index.js

@@ -0,0 +1,9 @@
+import { dynamic } from 'umi'
+
+export default dynamic({
+  loader: async function () {
+    // 这里的注释 webpackChunkName 可以指导 webpack 将该组件 HugeA 以这个名字单独拆出去
+    const { default: HarkDown } = await import(/* webpackChunkName: "external_react_markdown" */ './MarkDown')
+    return HarkDown
+  }
+})

src/pages/Hr/Notification/components/MessageDetail.jsx

@@ -1,7 +1,7 @@
-import MarkDown from 'react-markdown'
 import styles from '@/pages/Hr/Notification/index.less'
 import { Drawer, Tag, Typography } from 'antd'
 import { useIntl } from 'umi'
+import MarkDown from './MarkDown'
 
 const MessageDetail = props => {
   const { item: { id, title, createTime, content, msgType } = {}, ...otherProps } = props
@@ -22,7 +22,8 @@ const MessageDetail = props => {
           className={[
             'overflow-y-auto max-h-80vh py-3 px-4 bg-hex-f9f9f9 rounded-md boxShadow',
             styles.NotificationCont
-          ].join(' ')}>
+          ].join(' ')}
+        >
           <Typography.Paragraph>
             <MarkDown>{content}</MarkDown>
           </Typography.Paragraph>

src/pages/Hr/Notification/index.jsx

@@ -6,8 +6,8 @@ import AddMessage from './components/AddMessage'
 import consts from '@/consts'
 import { useRequest, useIntl, useAccess } from 'umi'
 import ws, { CmdType } from '@/utils/ws'
-import MarkDown from 'react-markdown'
 import { useModal } from '@/components/ModalStore'
+import MarkDown from './components/MarkDown'
 
 const Notification = () => {
   const intl = useIntl()