chore: minimize main bundle size by splitting vendors

.github/workflows/release.yml

@@ -43,9 +43,7 @@ jobs:
         run: pnpm install
 
       - name: build for gh-pages
-        env:
+        run: pnpm build --base /metacubexd
-          PUBLIC_PATH: '/metacubexd'
-        run: pnpm build
 
       - name: publish github pages
         uses: peaceiris/actions-gh-pages@v3

src/App.tsx

@@ -1,15 +1,16 @@
 import { Route, Routes, useNavigate } from '@solidjs/router'
-import { Show, onMount } from 'solid-js'
+import { Show, lazy, onMount } from 'solid-js'
 import { Header } from '~/components/Header'
-import { Config } from '~/pages/Config'
-import { Connections } from '~/pages/Connections'
-import { Logs } from '~/pages/Logs'
-import { Overview } from '~/pages/Overview'
-import { Proxies } from '~/pages/Proxies'
-import { Rules } from '~/pages/Rules'
-import { Setup } from '~/pages/Setup'
 import { curTheme, selectedEndpoint } from '~/signals'
 
+const Setup = lazy(() => import('~/pages/Setup'))
+const Overview = lazy(() => import('~/pages/Overview'))
+const Connections = lazy(() => import('~/pages/Connections'))
+const Logs = lazy(() => import('~/pages/Logs'))
+const Proxies = lazy(() => import('~/pages/Proxies'))
+const Rules = lazy(() => import('~/pages/Rules'))
+const Config = lazy(() => import('~/pages/Config'))
+
 export const App = () => {
   const navigate = useNavigate()
 

src/pages/Config.tsx

@@ -13,7 +13,7 @@ const schema = z.object({
   'mixed-port': z.number(),
 })
 
-export const Config = () => {
+export default () => {
   const request = useRequest()
   const formItemList = [
     {

src/pages/Connections.tsx

@@ -20,7 +20,7 @@ import { twMerge } from 'tailwind-merge'
 import { secret, useRequest, wsEndpointURL } from '~/signals'
 import type { Connection } from '~/types'
 
-export const Connections = () => {
+export default () => {
   const request = useRequest()
   const [search, setSearch] = createSignal('')
 

src/pages/Logs.tsx

@@ -3,7 +3,7 @@ import { createReconnectingWS } from '@solid-primitives/websocket'
 import { For, createEffect, createSignal } from 'solid-js'
 import { secret, wsEndpointURL } from '~/signals'
 
-export const Logs = () => {
+export default () => {
   const [search, setSearch] = createSignal('')
   const [logs, setLogs] = createSignal<string[]>([])
 

src/pages/Overview.tsx

@@ -1,6 +1,6 @@
 import { createEventSignal } from '@solid-primitives/event-listener'
 import { createReconnectingWS } from '@solid-primitives/websocket'
-import { ApexOptions } from 'apexcharts'
+import type { ApexOptions } from 'apexcharts'
 import byteSize from 'byte-size'
 import { SolidApexCharts } from 'solid-apexcharts'
 import {
@@ -18,7 +18,7 @@ const defaultChartOptions: ApexOptions = {
   chart: {
     toolbar: { show: false },
     zoom: { enabled: false },
-    animations: { easing: 'linear', dynamicAnimation: { speed: 1000 } },
+    animations: { easing: 'linear' },
   },
   noData: { text: 'Loading...' },
   legend: {
@@ -50,7 +50,7 @@ const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => (
   </div>
 )
 
-export const Overview = () => {
+export default () => {
   const [traffics, setTraffics] = createSignal<{ down: number; up: number }[]>(
     [],
   )
@@ -74,7 +74,7 @@ export const Overview = () => {
     const t = traffic()
 
     if (t) {
-      setTraffics((traffics) => [...traffics, t].slice(-100))
+      setTraffics((traffics) => [...traffics, t].slice(-10))
     }
   })
 
@@ -112,7 +112,7 @@ export const Overview = () => {
     const m = memory()
 
     if (m) {
-      setMemories((memories) => [...memories, m].slice(-100))
+      setMemories((memories) => [...memories, m].slice(-10))
     }
   })
 

src/pages/Proxies.tsx

@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge'
 import { useRequest } from '~/signals'
 import type { Proxy, ProxyProvider } from '~/types'
 
-export const Proxies = () => {
+export default () => {
   const request = useRequest()
   const [proxies, setProxies] = createSignal<Proxy[]>([])
   const [delayMap, setDelayMap] = createSignal<Record<string, number>>({})
@@ -15,6 +15,7 @@ export const Proxies = () => {
     if (typeof delay !== 'number' || delay === 0) {
       return ''
     }
+
     return <span>{delay}ms</span>
   }
 
@@ -53,7 +54,7 @@ export const Proxies = () => {
                 <div class="collapse-title text-xl font-medium">
                   {proxy.name} {proxy.type}
                 </div>
-                <div class="collapse-content grid grid-cols-1 gap-2 sm:grid-cols-3  lg:grid-cols-5">
+                <div class="collapse-content grid grid-cols-1 gap-2 sm:grid-cols-3 lg:grid-cols-5">
                   <For each={proxy.all}>
                     {(proxyPoint) => (
                       <div
@@ -86,12 +87,10 @@ export const Proxies = () => {
                 <div class="collapse-title text-xl font-medium">
                   {proxy.name}
                 </div>
-                <div class="collapse-content grid grid  grid-cols-1 gap-2 sm:grid-cols-3  lg:grid-cols-5">
+                <div class="collapse-content grid grid-cols-1 gap-2 sm:grid-cols-3 lg:grid-cols-5">
                   <For each={proxy.proxies}>
                     {(proxyPoint) => (
-                      <div
+                      <div class="card card-bordered card-compact m-1 flex-row justify-between border-secondary p-4">
-                        class={`card card-bordered card-compact m-1  flex-row justify-between  border-secondary p-4`}
-                      >
                         {proxyPoint.name} {renderDelay(proxyPoint.name)}
                       </div>
                     )}

src/pages/Rules.tsx

@@ -2,7 +2,7 @@ import { For, createSignal, onMount } from 'solid-js'
 import { useRequest } from '~/signals'
 import type { Rule, RuleProvider } from '~/types'
 
-export const Rules = () => {
+export default () => {
   const request = useRequest()
   const [rules, setRules] = createSignal<Rule[]>([])
   const [rulesProviders, setRulesProviders] = createSignal<RuleProvider[]>([])

src/pages/Setup.tsx

@@ -13,7 +13,7 @@ const schema = z.object({
   secret: z.string(),
 })
 
-export const Setup = () => {
+export default () => {
   const navigate = useNavigate()
 
   const { form } = createForm<z.infer<typeof schema>>({

vite.config.ts

@@ -1,13 +1,9 @@
 import devtools from 'solid-devtools/vite'
-import { defineConfig } from 'vite'
+import { defineConfig, splitVendorChunkPlugin } from 'vite'
 import solidPlugin from 'vite-plugin-solid'
 
 export default defineConfig({
-  base: process.env.PUBLIC_PATH || '/',
+  build: { chunkSizeWarningLimit: 1000 },
-  resolve: {
+  resolve: { alias: { '~': '/src' } },
-    alias: {
+  plugins: [devtools(), solidPlugin(), splitVendorChunkPlugin()],
-      '~': '/src',
-    },
-  },
-  plugins: [devtools(), solidPlugin()],
 })