chore: minimize main bundle size by splitting vendors

This commit is contained in:
kunish 2023-08-29 14:44:49 +08:00
parent 082abab2d4
commit 36cc05fca3
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
10 changed files with 29 additions and 35 deletions

View File

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

View File

@ -1,15 +1,16 @@
import { Route, Routes, useNavigate } from '@solidjs/router' 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 { 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' 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 = () => { export const App = () => {
const navigate = useNavigate() const navigate = useNavigate()

View File

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

View File

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

View File

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

View File

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

View File

@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge'
import { useRequest } from '~/signals' import { useRequest } from '~/signals'
import type { Proxy, ProxyProvider } from '~/types' import type { Proxy, ProxyProvider } from '~/types'
export const Proxies = () => { export default () => {
const request = useRequest() const request = useRequest()
const [proxies, setProxies] = createSignal<Proxy[]>([]) const [proxies, setProxies] = createSignal<Proxy[]>([])
const [delayMap, setDelayMap] = createSignal<Record<string, number>>({}) const [delayMap, setDelayMap] = createSignal<Record<string, number>>({})
@ -15,6 +15,7 @@ export const Proxies = () => {
if (typeof delay !== 'number' || delay === 0) { if (typeof delay !== 'number' || delay === 0) {
return '' return ''
} }
return <span>{delay}ms</span> return <span>{delay}ms</span>
} }
@ -86,12 +87,10 @@ export const Proxies = () => {
<div class="collapse-title text-xl font-medium"> <div class="collapse-title text-xl font-medium">
{proxy.name} {proxy.name}
</div> </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}> <For each={proxy.proxies}>
{(proxyPoint) => ( {(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)} {proxyPoint.name} {renderDelay(proxyPoint.name)}
</div> </div>
)} )}

View File

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

View File

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

View File

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