perf: 大优化，移除 @pureadmin/components , 打包大小未启用压缩前减少 0.4 MB , 首屏请求减少 2.3 MB 的资源

2026-01-26 17:02:00 +08:00 · 2022-11-26 23:37:00 +08:00
parent 63f2540745
commit 4f786d6262
28 changed files with 416 additions and 803 deletions
--- a/src/views/pure-table/base/column-template/columns.tsx
+++ b/src/views/pure-table/base/column-template/columns.tsx
@@ -1,4 +1,4 @@
-import { message } from "@pureadmin/components";
+import { message } from "@/utils/message";
 import { tableData } from "../data";

 // 如果您不习惯tsx写法，可以传slot，然后在template里写
@@ -56,11 +56,14 @@ export function useColumns() {
  ];

  const handleEdit = (index: number, row) => {
-    message.success(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+    message(
+      `您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`,
+      "success"
+    );
  };

  const handleDelete = (index: number, row) => {
-    message.error(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+    message(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`, "info");
  };

  return {
--- a/src/views/pure-table/base/header-renderer/columns.tsx
+++ b/src/views/pure-table/base/header-renderer/columns.tsx
@@ -1,4 +1,4 @@
-import { message } from "@pureadmin/components";
+import { message } from "@/utils/message";
 import { tableData } from "../data";
 import { ref, computed } from "vue";

@@ -15,11 +15,14 @@ export function useColumns() {
  );

  const handleEdit = (index: number, row) => {
-    message.success(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+    message(
+      `您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`,
+      "success"
+    );
  };

  const handleDelete = (index: number, row) => {
-    message.error(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+    message(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`, "info");
  };

  const columns: TableColumnList = [
--- a/src/views/pure-table/high.vue
+++ b/src/views/pure-table/high.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import { list } from "./high/list";
-import { Tabs, TabPane } from "@pureadmin/components";

 defineOptions({
  name: "PureTableHigh"
 });
+
+const selected = ref(0);
+
+function tabClick({ index }) {
+  selected.value = index;
+}
 </script>

 <template>
@@ -32,21 +38,30 @@ defineOptions({
      :closable="false"
    />

-    <Tabs :destroyInactiveTabPane="true">
-      <TabPane v-for="item of list" :key="item.key">
-        <template #tab>
-          <el-tooltip :content="item.content" placement="top-end">
-            <span>{{ item.title }}</span>
-          </el-tooltip>
-        </template>
-        <component :is="item.component" />
-      </TabPane>
-    </Tabs>
+    <el-tabs @tab-click="tabClick">
+      <template v-for="(item, index) of list" :key="item.key">
+        <el-tab-pane :lazy="true">
+          <template #label>
+            <el-tooltip
+              :content="`（第 ${index + 1} 个示例）${item.content}`"
+              placement="top-end"
+            >
+              <span>{{ item.title }}</span>
+            </el-tooltip>
+          </template>
+          <component v-if="selected == index" :is="item.component" />
+        </el-tab-pane>
+      </template>
+    </el-tabs>
  </el-card>
 </template>

 <style scoped>
-:deep(.ant-tabs-content-holder) {
+:deep(.el-tabs__nav-wrap)::after {
+  height: 1px;
+}
+
+:deep(.el-tabs__header) {
  margin-top: 10px;
 }

--- a/src/views/pure-table/high/contextmenu/columns.tsx
+++ b/src/views/pure-table/high/contextmenu/columns.tsx
@@ -1,7 +1,7 @@
 import { ref } from "vue";
 import { tableDataDrag } from "../data";
 import { clone } from "@pureadmin/utils";
-import { message } from "@pureadmin/components";
+import { message } from "@/utils/message";
 import { CustomMouseMenu } from "@howdyjs/mouse-menu";

 export function useColumns() {
@@ -33,10 +33,11 @@ export function useColumns() {
        label: "编辑",
        tips: "Edit",
        fn: row =>
-          message.success(
+          message(
            `您编辑了第 ${
              dataList.value.findIndex(v => v.id === row.id) + 1
-            } 行，数据为：${JSON.stringify(row)}`
+            } 行，数据为：${JSON.stringify(row)}`,
+            "success"
          )
      }
    ]
--- a/src/views/pure-table/high/echarts/columns.tsx
+++ b/src/views/pure-table/high/echarts/columns.tsx
@@ -5,9 +5,9 @@ import {
  type EchartOptions
 } from "@pureadmin/utils";
 import { tableDataDrag } from "../data";
+import { message } from "@/utils/message";
 import { templateRef } from "@vueuse/core";
 import { ref, type Ref, computed } from "vue";
-import { message } from "@pureadmin/components";

 export function useColumns() {
  const dataList = ref(clone(tableDataDrag, true).splice(0, 4));
@@ -76,8 +76,9 @@ export function useColumns() {
      {
        name: "click",
        callback: ({ data: { name, value } }) => {
-          message.success(
-            `您点击了第 ${i + 1} 行，图表标题为${name}，图表数据为：${value}`
+          message(
+            `您点击了第 ${i + 1} 行，图表标题为${name}，图表数据为：${value}`,
+            "success"
          );
        }
      }
--- a/src/views/pure-table/high/edit/columns.tsx
+++ b/src/views/pure-table/high/edit/columns.tsx
@@ -1,6 +1,6 @@
 import { tableDataEdit } from "../data";
+import { message } from "@/utils/message";
 import { ref, computed, Transition } from "vue";
-import { message } from "@pureadmin/components";
 import { clone, delay } from "@pureadmin/utils";

 // 温馨提示：编辑整行方法雷同，将cellRenderer后面渲染的组件抽出来做对应处理即可
@@ -109,10 +109,11 @@ export function useColumns() {

  function onSure(index) {
    dataList.value[index].id = inputValMap.value[index].value;
-    message.success(
+    message(
      `您编辑了第 ${index + 1} 行，编辑后数据为：${JSON.stringify(
        dataList.value[index]
-      )}`
+      )}`,
+      "success"
    );
    // 编辑状态关闭
    editStatus.value[index] = Object.assign({}, editStatus.value[index], {
--- a/src/views/pure-table/high/execl/columns.tsx
+++ b/src/views/pure-table/high/execl/columns.tsx
@@ -2,7 +2,7 @@ import { ref } from "vue";
 import { utils, writeFile } from "xlsx";
 import { tableDataDrag } from "../data";
 import { clone } from "@pureadmin/utils";
-import { message } from "@pureadmin/components";
+import { message } from "@/utils/message";

 export function useColumns() {
  const dataList = ref(clone(tableDataDrag, true));
@@ -39,7 +39,7 @@ export function useColumns() {
    const workBook = utils.book_new();
    utils.book_append_sheet(workBook, workSheet, "数据报表");
    writeFile(workBook, "pure-admin-table.xlsx");
-    message.success("导出成功");
+    message("导出成功", "success");
  };

  return {
--- a/src/views/pure-table/index.vue
+++ b/src/views/pure-table/index.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { list } from "./base/list";
-import { Tabs, TabPane } from "@pureadmin/components";

 defineOptions({
  name: "PureTable"
@@ -33,21 +32,30 @@ defineOptions({
      :closable="false"
    />

-    <Tabs :destroyInactiveTabPane="true">
-      <TabPane v-for="item of list" :key="item.key">
-        <template #tab>
-          <el-tooltip :content="item.content" placement="top-end">
-            <span>{{ item.title }}</span>
-          </el-tooltip>
-        </template>
-        <component :is="item.component" />
-      </TabPane>
-    </Tabs>
+    <el-tabs>
+      <template v-for="(item, index) of list" :key="item.key">
+        <el-tab-pane>
+          <template #label>
+            <el-tooltip
+              :content="`（第 ${index + 1} 个示例）${item.content}`"
+              placement="top-end"
+            >
+              <span>{{ item.title }}</span>
+            </el-tooltip>
+          </template>
+          <component :is="item.component" />
+        </el-tab-pane>
+      </template>
+    </el-tabs>
  </el-card>
 </template>

 <style scoped>
-:deep(.ant-tabs-content-holder) {
+:deep(.el-tabs__nav-wrap)::after {
+  height: 1px;
+}
+
+:deep(.el-tabs__header) {
  margin-top: 10px;
 }