From 682fa7e4582f50552931c70302d2a5eddbd0e296 Mon Sep 17 00:00:00 2001
From: fhysy <1149505133@qq.com>
Date: Thu, 29 May 2025 11:06:09 +0800
Subject: [PATCH] =?UTF-8?q?refactor(import):=20=E4=BC=98=E5=8C=96=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E5=BC=95=E5=85=A5=E6=96=B9=E5=BC=8F=E5=92=8C=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84,=E5=87=8F=E4=BD=8E=E6=89=93=E5=8C=85=E4=BD=93?=
 =?UTF-8?q?=E7=A7=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将全局引入 iView 改为按需引入，提高加载性能
- 优化 Monaco Editor 的引入方式，仅引入必要的模块和功能
- 添加 babel-plugin-import 插件配置，支持按需引入组件
- 更新 package.json，增加 build:report 脚本
- 新增 iview-import.js 工具文件，用于按需引入 iView 组件
---
 babel.config.js                           | 12 +++++++-
 package.json                              |  5 ++-
 src/main.js                               |  7 +++--
 src/utils/iview-import.js                 | 37 +++++++++++++++++++++++
 src/views/components/my-monaco-editor.vue |  3 +-
 vue.config.js                             |  5 ++-
 6 files changed, 63 insertions(+), 6 deletions(-)
 create mode 100644 src/utils/iview-import.js

diff --git a/babel.config.js b/babel.config.js
index b99f0014..fcde9d64 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -9,5 +9,15 @@ module.exports = {
       // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
       'plugins': ['dynamic-import-node']
     }
-  }
+  },
+  'plugins': [
+    [
+      'import',
+      {
+        'libraryName': 'iview',
+        'libraryDirectory': 'src/components'
+      },
+      'iview'
+    ]
+  ]
 }
diff --git a/package.json b/package.json
index 5a59c332..e2855d88 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
     "build:ccprod": "vue-cli-service build --mode ccprod",
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
-    "lint": "eslint --ext .js,.vue src"
+    "lint": "eslint --ext .js,.vue src",
+    "build:report": "vue-cli-service build --report"
   },
   "husky": {
     "hooks": {
@@ -73,6 +74,7 @@
     "sass-loader": "^7.0.1",
     "save": "^2.5.0",
     "screenfull": "5.0.2",
+    "smartpower": "file:",
     "sortablejs": "1.10.2",
     "vue": "2.6.12",
     "vue-amap": "^0.5.10",
@@ -91,6 +93,7 @@
     "@vue/cli-plugin-eslint": "4.4.6",
     "@vue/cli-service": "4.4.6",
     "babel-eslint": "10.1.0",
+    "babel-plugin-import": "^1.13.8",
     "chalk": "4.1.0",
     "compression-webpack-plugin": "2.0.0",
     "connect": "3.6.6",
diff --git a/src/main.js b/src/main.js
index 46c0c96b..87077064 100644
--- a/src/main.js
+++ b/src/main.js
@@ -27,8 +27,11 @@ import dataV from '@jiaminghi/data-view'
 // import VueCron from 'vue-cron';
 // 自定义表格工具扩展
 import RightToolbar from "@/components/RightToolbar"
-import iView from 'iview'
+// 将全局引入 iView 改为按需引入
+// import iView from 'iview'
+// import 'iview/dist/styles/iview.css'
 import 'iview/dist/styles/iview.css'
+import '@/utils/iview-import' // 按需引入 iView 组件
 
 import VueAMap from 'vue-amap';
 
@@ -61,7 +64,7 @@ Vue.prototype.msgInfo = function (msg) {
 // 全局组件挂载
 Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)
-Vue.use(iView)
+// Vue.use(iView) // 已改为按需引入
 Vue.use(dataV)
 Vue.use(VueClipboard)
 Vue.use(VueAMap);
diff --git a/src/utils/iview-import.js b/src/utils/iview-import.js
new file mode 100644
index 00000000..10333ed4
--- /dev/null
+++ b/src/utils/iview-import.js
@@ -0,0 +1,37 @@
+import Vue from 'vue'
+import {
+  Card,
+  Tabs,
+  TabPane,
+  Table,
+  DatePicker,
+  Tooltip,
+  Input,
+  RadioGroup,
+  Radio,
+  InputNumber,
+  CheckboxGroup,
+  Checkbox,
+  Select,
+  Option,
+  Modal,
+  Icon
+} from 'iview'
+
+// 按需引入 iView 组件
+Vue.component('Card', Card)
+Vue.component('Tabs', Tabs)
+Vue.component('TabPane', TabPane)
+Vue.component('Table', Table)
+Vue.component('DatePicker', DatePicker)
+Vue.component('Tooltip', Tooltip)
+Vue.component('Input', Input)
+Vue.component('RadioGroup', RadioGroup)
+Vue.component('Radio', Radio)
+Vue.component('InputNumber', InputNumber)
+Vue.component('CheckboxGroup', CheckboxGroup)
+Vue.component('Checkbox', Checkbox)
+Vue.component('Select', Select)
+Vue.component('Option', Option)
+Vue.component('Modal', Modal)
+Vue.component('Icon', Icon)
\ No newline at end of file
diff --git a/src/views/components/my-monaco-editor.vue b/src/views/components/my-monaco-editor.vue
index 03ce62cd..90edfb2e 100644
--- a/src/views/components/my-monaco-editor.vue
+++ b/src/views/components/my-monaco-editor.vue
@@ -8,7 +8,8 @@ my-monaco-editor:
 </template>
 
 <script>
-import * as monaco from 'monaco-editor'
+// import * as monaco from 'monaco-editor'
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 
 export default {
   props: {
diff --git a/vue.config.js b/vue.config.js
index 02e0d559..3fcac345 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -56,7 +56,10 @@ module.exports = {
         { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'},
         { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'cdn/js/liveplayer/'},
       ]),
-      new MonacoWebpackPlugin()
+      new MonacoWebpackPlugin({
+        languages: ['json'],
+        features: ['bracketMatching', 'folding', 'hover'],
+      })
     ],
     name: name,
     resolve: {