chore: Optimize frontend build size

strahe · Oct 10, 2024 · f3aefd4 · f3aefd4
1 parent 2af99fc
commit f3aefd4
Show file tree

Hide file tree

Showing 34 changed files with 175 additions and 138 deletions.
diff --git a/ui/.gitignore b/ui/.gitignore
@@ -20,3 +20,4 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+stats.html
diff --git a/ui/package.json b/ui/package.json
@@ -18,6 +18,7 @@
     "@fontsource/public-sans": "^5.0.18",
     "@fontsource/roboto": "^5.0.13",
     "@mdi/font": "7.4.47",
+    "@tabler/icons-vue": "^3.19.0",
     "@vue/apollo-composable": "^4.0.2",
     "@vueuse/core": "^10.11.0",
     "ant-design-vue": "^4.2.3",
@@ -31,7 +32,6 @@
     "vue": "^3.5.6",
     "vue-codemirror": "^6.1.1",
     "vue-i18n": "9",
-    "vue-tabler-icons": "^2.21.0",
     "vue3-apexcharts": "^1.5.3",
     "vue3-easy-data-table": "^1.5.47",
     "vue3-perfect-scrollbar": "^2.0.0",
@@ -57,6 +57,7 @@
     "eslint-plugin-promise": "^6.4.0",
     "eslint-plugin-vue": "^9.27.0",
     "pinia": "^2.1.7",
+    "rollup-plugin-visualizer": "^5.12.0",
     "sass": "1.77.6",
     "typescript": "^5.5.4",
     "unplugin-fonts": "^1.1.1",

diff --git a/ui/src/layouts/header/FullScreen.vue b/ui/src/layouts/header/FullScreen.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-// icons
-import { ArrowsMaximizeIcon, ArrowsMinimizeIcon } from 'vue-tabler-icons'
+
+import { IconArrowsMaximize, IconArrowsMinimize } from '@tabler/icons-vue'
 
 const fullscreen = ref(false)
 
@@ -24,8 +24,8 @@ function toggleFullscreen () {
       size="small"
       @click="toggleFullscreen"
     >
-      <ArrowsMaximizeIcon v-if="!fullscreen" />
-      <ArrowsMinimizeIcon v-if="fullscreen" />
+      <IconArrowsMaximize v-if="!fullscreen" />
+      <IconArrowsMinimize v-if="fullscreen" />
     </v-btn>
   </div>
 </template>
diff --git a/ui/src/layouts/header/Header.vue b/ui/src/layouts/header/Header.vue
@@ -2,7 +2,6 @@
 import { ref, watch } from 'vue'
 // icons
 import { MenuFoldOutlined } from '@ant-design/icons-vue'
-import { AdjustmentsHorizontalIcon, LanguageIcon, SearchIcon } from 'vue-tabler-icons'
 
 import LanguageDD from './LanguageDD.vue'
 import NotificationDD from './NotificationDD.vue'
@@ -11,6 +10,7 @@ import Searchbar from './SearchBarPanel.vue'
 import FullScreen from './FullScreen.vue'
 import { useCustomizerStore } from '@/stores/customizer'
 import Logo from '@/layouts/logo/Logo.vue'
+import { IconAdjustmentsHorizontal, IconLanguage, IconSearch } from '@tabler/icons-vue'
 
 const customizer = useCustomizerStore()
 const priority = ref(customizer.horizontalLayout ? 0 : 0)
@@ -48,7 +48,7 @@ watch(priority, newPriority => {
           variant="flat"
           v-bind="props"
         >
-          <SearchIcon :style="{ fontSize: '17px' }" />
+          <IconSearch :size="17" />
         </v-btn>
       </template>
       <v-sheet class="search-sheet v-col-12 pa-0" width="320">
@@ -60,7 +60,7 @@ watch(priority, newPriority => {
           variant="solo"
         >
           <template #prepend-inner>
-            <SearchIcon :style="{ fontSize: '17px' }" />
+            <IconSearch :size="17" />
           </template>
         </v-text-field>
       </v-sheet>
@@ -80,7 +80,7 @@ watch(priority, newPriority => {
           size="small"
           v-bind="props"
         >
-          <LanguageIcon />
+          <IconLanguage />
         </v-btn>
       </template>
       <v-sheet rounded="md" width="200">
@@ -97,7 +97,7 @@ watch(priority, newPriority => {
           icon
           v-bind="props"
         >
-          <v-icon :icon="AdjustmentsHorizontalIcon" />
+          <v-icon :icon="IconAdjustmentsHorizontal" />
         </v-btn>
       </template>
       <v-card>

diff --git a/ui/src/layouts/header/NotificationDD.vue b/ui/src/layouts/header/NotificationDD.vue
@@ -4,6 +4,7 @@ import { BellOutlined, CheckCircleOutlined } from '@ant-design/icons-vue'
 import { useSubscription } from '@vue/apollo-composable'
 import { SubscribeAlerts } from '@/layouts/header/graphql'
 import { useAlertsStore } from '@/stores/alerts'
+import { IconExclamationCircle } from '@tabler/icons-vue'
 import moment from 'moment'
 
 const alertStore = useAlertsStore()
@@ -84,7 +85,7 @@ function markAllRead () {
             >
               <template #prepend>
                 <v-avatar class="mr-3 py-2 text-success" color="warning" size="36" variant="flat">
-                  <ExclamationCircleIcon />
+                  <IconExclamationCircle />
                 </v-avatar>
               </template>
               <div class="d-inline-flex justify-space-between w-100">

diff --git a/ui/src/layouts/header/ProfileDD.vue b/ui/src/layouts/header/ProfileDD.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { LogoutIcon } from 'vue-tabler-icons'
 import { useAuthStore } from '@/stores/auth'
 
+import { IconLogout } from '@tabler/icons-vue'
+
 const authStore = useAuthStore()
 </script>
 
@@ -24,7 +25,7 @@ const authStore = useAuthStore()
           variant="text"
           @click="authStore.logout"
         >
-          <LogoutIcon :style="{ fontSize: '20px' }" />
+          <IconLogout :size="20" />
         </v-btn>
       </div>
     </div>

diff --git a/ui/src/layouts/horizontal-sidebar/horizontalItems.ts b/ui/src/layouts/horizontal-sidebar/horizontalItems.ts
@@ -1,11 +1,11 @@
 import {
-  BoxIcon,
-  ChartHistogramIcon,
-  DatabaseIcon,
-  HomeIcon,
-  ServerIcon, SettingsIcon, UsersIcon,
-  VectorIcon,
-} from 'vue-tabler-icons'
+  IconBox,
+  IconChartHistogram,
+  IconDatabase,
+  IconHome,
+  IconServer, IconSettings, IconUsers,
+  IconVector,
+} from '@tabler/icons-vue'
 
 export interface menu {
   header?: string;
@@ -28,61 +28,61 @@ export interface menu {
 const horizontalItems: menu[] = [
   {
     title: 'Dashboard',
-    icon: HomeIcon,
+    icon: IconHome,
     to: '#',
     children: [
       {
         title: 'Overview',
-        icon: HomeIcon,
+        icon: IconHome,
         to: '/app/overview',
       },
       {
         title: 'Analytics',
-        icon: ChartHistogramIcon,
+        icon: IconChartHistogram,
         to: '/app/analytics',
       },
     ],
   },
   {
     title: 'Sealing',
-    icon: VectorIcon,
+    icon: IconVector,
     to: '#',
     children: [
       {
         title: 'Miners',
-        icon: UsersIcon,
+        icon: IconUsers,
         to: '/app/miners',
       },
       {
         title: 'PoRep',
-        icon: VectorIcon,
+        icon: IconVector,
         to: '/app/porep',
       },
       {
         title: 'Sectors',
-        icon: BoxIcon,
+        icon: IconBox,
         to: '/app/sectors',
       },
     ],
   },
   {
     title: 'Cluster',
-    icon: ServerIcon,
+    icon: IconServer,
     to: '#',
     children: [
       {
         title: 'Machines',
-        icon: ServerIcon,
+        icon: IconServer,
         to: '/app/machines',
       },
       {
         title: 'Storages',
-        icon: DatabaseIcon,
+        icon: IconDatabase,
         to: '/app/storages',
       },
       {
         title: 'Configurations',
-        icon: SettingsIcon,
+        icon: IconSettings,
         to: '/app/configurations',
       },
     ],

diff --git a/ui/src/layouts/vertical-sidebar/sidebarItem.ts b/ui/src/layouts/vertical-sidebar/sidebarItem.ts
@@ -1,13 +1,13 @@
 import {
-  BoxIcon,
-  ChartHistogramIcon,
-  DatabaseIcon,
-  HomeIcon,
-  ServerIcon,
-  SettingsIcon,
-  UsersIcon,
-  VectorIcon,
-} from 'vue-tabler-icons'
+  IconBox,
+  IconChartHistogram,
+  IconDatabase,
+  IconHome,
+  IconServer,
+  IconSettings,
+  IconUsers,
+  IconVector,
+} from '@tabler/icons-vue'
 
 export interface menu {
   header?: string;
@@ -30,44 +30,44 @@ const sidebarItem: menu[] = [
   { header: 'Dashboard' },
   {
     title: 'Overview',
-    icon: HomeIcon,
+    icon: IconHome,
     to: '/app/overview',
   },
   {
     title: 'Analytics',
-    icon: ChartHistogramIcon,
+    icon: IconChartHistogram,
     to: '/app/analytics',
   },
   { header: 'Sealing' },
   {
     title: 'Miners',
-    icon: UsersIcon,
+    icon: IconUsers,
     to: '/app/miners',
   },
   {
     title: 'PoRep',
-    icon: VectorIcon,
+    icon: IconVector,
     to: '/app/porep',
   },
   {
     title: 'Sectors',
-    icon: BoxIcon,
+    icon: IconBox,
     to: '/app/sectors',
   },
   { header: 'Cluster' },
   {
     title: 'Machines',
-    icon: ServerIcon,
+    icon: IconServer,
     to: '/app/machines',
   },
   {
     title: 'Storages',
-    icon: DatabaseIcon,
+    icon: IconDatabase,
     to: '/app/storages',
   },
   {
     title: 'Configurations',
-    icon: SettingsIcon,
+    icon: IconSettings,
     to: '/app/configurations',
   },
 ]

diff --git a/ui/src/main.ts b/ui/src/main.ts
@@ -14,25 +14,6 @@ import App from './App.vue'
 import { createApp } from 'vue'
 import '@/scss/style.scss'
 import 'ant-design-vue/dist/reset.css'
-import '@fontsource/roboto/400.css'
-import '@fontsource/roboto/500.css'
-import '@fontsource/roboto/300.css'
-import '@fontsource/roboto/700.css'
-
-import '@fontsource/inter/400.css'
-import '@fontsource/inter/500.css'
-import '@fontsource/inter/600.css'
-import '@fontsource/inter/700.css'
-
-import '@fontsource/poppins/400.css'
-import '@fontsource/poppins/500.css'
-import '@fontsource/poppins/600.css'
-import '@fontsource/poppins/700.css'
-
-import '@fontsource/public-sans/400.css'
-import '@fontsource/public-sans/500.css'
-import '@fontsource/public-sans/600.css'
-import '@fontsource/public-sans/700.css'
 
 const app = createApp(App)
 

diff --git a/ui/src/plugins/index.ts b/ui/src/plugins/index.ts
@@ -10,7 +10,6 @@ import pinia from '../stores'
 import router from '../router'
 import { PerfectScrollbarPlugin } from 'vue3-perfect-scrollbar'
 import Vue3EasyDataTable from 'vue3-easy-data-table'
-import VueTablerIcons from 'vue-tabler-icons'
 import Antd from 'ant-design-vue'
 import { vMaska } from 'maska/vue'
 
@@ -28,7 +27,6 @@ export function registerPlugins (app: App) {
     .use(router)
     .use(pinia)
     .use(i18n)
-    .use(VueTablerIcons)
     .use(PerfectScrollbarPlugin)
     .use(Antd)
     .use(VueApexCharts)

diff --git a/ui/src/views/configurations/ConfigurationList.vue b/ui/src/views/configurations/ConfigurationList.vue
@@ -5,6 +5,7 @@ import { computed, ComputedRef, ref } from 'vue'
 import { Config } from '@/typed-graph'
 import { GetConfigs } from '@/views/query/config'
 import { Item } from 'vue3-easy-data-table'
+import { IconPlus, IconReload, IconSearch } from '@tabler/icons-vue'
 import ConfigRemoveDialog from '@/views/configurations/ConfigRemoveDialog.vue'
 
 const { result, loading, refetch, error } = useQuery(GetConfigs, null, () => ({
@@ -42,15 +43,15 @@ const themeColor = ref('rgb(var(--v-theme-primary))')
                 variant="outlined"
               >
                 <template #prepend-inner>
-                  <SearchIcon :style="{ fontSize: '14px' }" />
+                  <IconSearch :size="16" />
                 </template>
               </v-text-field>
             </v-col>
             <v-col cols="12" md="3">
               <div class="d-flex ga-2 justify-end">
                 <v-btn color="primary" :to="{name: 'ConfigurationCreate'}" variant="flat">
                   <template #prepend>
-                    <PlusIcon />
+                    <IconPlus />
                   </template>
                   Create
                 </v-btn>
@@ -61,7 +62,7 @@ const themeColor = ref('rgb(var(--v-theme-primary))')
                   variant="text"
                   @click="refetch"
                 >
-                  <ReloadIcon />
+                  <IconReload />
                 </v-btn>
               </div>
             </v-col>
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,3 +20,4 @@ pnpm-debug.log* @@
     *.njsproj
     *.sln
     *.sw?
+    stats.html