refactor(import): 优化代码引入方式和结构,减低打包体积

- 将全局引入 iView 改为按需引入，提高加载性能
- 优化 Monaco Editor 的引入方式，仅引入必要的模块和功能
- 添加 babel-plugin-import 插件配置，支持按需引入组件
- 更新 package.json，增加 build:report 脚本
- 新增 iview-import.js 工具文件，用于按需引入 iView 组件

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'
+    ]
+  ]
 }

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",

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);

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)

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: {

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: {