前端优化

dlink-admin/pom.xml

@@ -141,23 +141,6 @@
             <groupId>com.dlink</groupId>
             <artifactId>dlink-gateway</artifactId>
         </dependency>
-        <!--<dependency>
-            <groupId>com.dlink</groupId>
-            <artifactId>dlink-metadata-mysql</artifactId>
-        </dependency>
-        <dependency>
-            <groupId>com.dlink</groupId>
-            <artifactId>dlink-metadata-doris</artifactId>
-        </dependency>
-        <dependency>
-            <groupId>com.dlink</groupId>
-            <artifactId>dlink-metadata-phoenix</artifactId>
-        </dependency>
-        <dependency>
-            <groupId>org.apache.phoenix</groupId>
-            <artifactId>phoenix-core</artifactId>
-            <version>4.14.2-HBase-1.4</version>
-        </dependency>-->
     </dependencies>
     <build>
         <plugins>

dlink-web/config/config.dev.ts

 // https://umijs.org/config/
-import { defineConfig } from 'umi';
+import {defineConfig} from 'umi';
+
+const HappyPack = require('happypack');
+const happyThreadPool = HappyPack.ThreadPool({ size: require('os').cpus().length })
+const TerserPlugin = require('terser-webpack-plugin');
 
 export default defineConfig({
   plugins: [
@@ -12,7 +16,26 @@ export default defineConfig({
     babelPlugins: [],
     babelOptions: {},
   },
+  chainWebpack: (memo, { webpack }) => {
+    memo.plugin('HappyPack').use(HappyPack, [{
+      id: 'js',
+      loaders: ['babel-loader'],
+      threadPool: happyThreadPool,
+    },
+      memo.plugin('TerserPlugin').use(TerserPlugin, [{
+        parallel: require('os').cpus().length - 1,
+        terserOptions: {
+          compress: {
+            inline: false
+          },
+          mangle: {
+            safari10: true
+          }
+        }
+      }])
+    ])
+  }
   /*webpack5: {
-    // lazyCompilation: {},
+      //: {},
   },*/
 });

dlink-web/config/config.ts

 // https://umijs.org/config/
-import { defineConfig } from 'umi';
-import { join } from 'path';
+import {defineConfig} from 'umi';
+import {join} from 'path';
 
 import defaultSettings from './defaultSettings';
 import proxy from './proxy';
 import routes from './routes';
 
+const HappyPack = require('happypack');
+const happyThreadPool = HappyPack.ThreadPool({ size: require('os').cpus().length })
+const TerserPlugin = require('terser-webpack-plugin');
+
 const { REACT_APP_ENV } = process.env;
 
 export default defineConfig({
@@ -69,4 +73,23 @@ export default defineConfig({
       projectName: 'swagger',
     },
   ],
+  chainWebpack: (memo, { webpack }) => {
+    memo.plugin('HappyPack').use(HappyPack, [{
+      id: 'js',
+      loaders: ['babel-loader'],
+      threadPool: happyThreadPool,
+    },
+      memo.plugin('TerserPlugin').use(TerserPlugin, [{
+        parallel: require('os').cpus().length - 1,
+        terserOptions: {
+          compress: {
+            inline: false
+          },
+          mangle: {
+            safari10: true
+          }
+        }
+      }])
+    ])
+  }
 });

dlink-web/package.json

@@ -87,7 +87,10 @@
     "react-monaco-editor": "^0.43.0",
     "sql-formatter": "^4.0.2",
     "umi": "^3.5.0",
-    "umi-serve": "^1.9.10"
+    "umi-serve": "^1.9.10",
+    "happypack": "^5.0.1",
+    "terser-webpack-plugin": "^4.2.3",
+    "hap-toolkit": "^1.9.8"
   },
   "devDependencies": {
     "@ant-design/pro-cli": "^2.0.2",
@@ -122,6 +125,9 @@
     "puppeteer-core": "^8.0.0",
     "stylelint": "^13.0.0",
     "swagger-ui-react": "^3.52.3",
+    "hap-toolkit": "^1.9.8",
+    "happypack": "^5.0.1",
+    "terser-webpack-plugin": "^4.2.3",
     "typescript": "^4.2.2"
   },
   "engines": {

dlink-web/src/pages/AlertGroup/components/AlertGroupForm.tsx

-import React, {useEffect, useState} from 'react';
-import {Form, Button, Input, Modal, Select,Tag,Switch} from 'antd';
+import React, {useState} from 'react';
+import {Button, Form, Input, Modal, Select, Switch, Tag} from 'antd';
 import {AlertGroupTableListItem} from "@/pages/AlertGroup/data";
-import {JarStateType} from "@/pages/Jar/model";
 import {connect} from "umi";
-import {StateType} from "@/pages/FlinkSqlStudio/model";
 import {AlertStateType} from "@/pages/AlertInstance/model";
 import {AlertInstanceTableListItem} from "@/pages/AlertInstance/data";
 import {buildFormData, getFormData} from "@/pages/AlertGroup/function";
@@ -69,7 +67,7 @@ const AlertGroupForm: React.FC<AlertGroupFormProps> = (props) => {
         <Form.Item
           name="alertInstanceIds"
           label="报警实例"
-          help="请选择报警组实例"
+          rules={[{required: true, message: '请选择报警组实例！'}]}
         >
           <Select
             mode="multiple"