Skip to content

Commit dc6fef0

Browse files
LyleMiLyleMi
committed
fix frontend chunk splitting
1 parent cd8abf2 commit dc6fef0

10 files changed

Lines changed: 106 additions & 27 deletions

File tree

‎frontend/src/App.vue‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
<script setup lang="ts">
22
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
33
import { useRoute, useRouter } from 'vue-router'
4-
import { message } from 'ant-design-vue'
4+
import AButton from 'ant-design-vue/es/button'
5+
import AConfigProvider from 'ant-design-vue/es/config-provider'
6+
import Layout from 'ant-design-vue/es/layout'
7+
import Menu from 'ant-design-vue/es/menu'
8+
import message from 'ant-design-vue/es/message'
9+
import Typography from 'ant-design-vue/es/typography'
510
import {
611
BarChartOutlined,
712
HistoryOutlined,
@@ -13,6 +18,14 @@ import {
1318
import { api, type Settings } from './api'
1419
import { APP_DATA_CHANGED_EVENT, type AppDataChangeDetail } from './events'
1520
21+
const ALayout = Layout
22+
const ALayoutContent = Layout.Content
23+
const ALayoutHeader = Layout.Header
24+
const ALayoutSider = Layout.Sider
25+
const AMenu = Menu
26+
const AMenuItem = Menu.Item
27+
const ATypographyText = Typography.Text
28+
1629
const route = useRoute()
1730
const router = useRouter()
1831
const settings = ref<Settings | null>(null)

‎frontend/src/chartRuntime.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { BarChart, LineChart } from 'echarts/charts'
2+
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
3+
import { init, use, type ECharts } from 'echarts/core'
4+
import { CanvasRenderer } from 'echarts/renderers'
5+
6+
use([BarChart, LineChart, GridComponent, LegendComponent, TooltipComponent, CanvasRenderer])
7+
8+
export { init, type ECharts }

‎frontend/src/main.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { createApp } from 'vue'
2-
import Antd from 'ant-design-vue'
32
import 'ant-design-vue/dist/reset.css'
43
import './styles.css'
54
import App from './App.vue'
65
import router from './router'
76

8-
createApp(App).use(router).use(Antd).mount('#app')
7+
createApp(App).use(router).mount('#app')

‎frontend/src/router.ts‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,14 @@
11
import { createRouter, createWebHashHistory } from 'vue-router'
2-
import Overview from './views/Overview.vue'
3-
import Sessions from './views/Sessions.vue'
4-
import SessionDetail from './views/SessionDetail.vue'
5-
import Tools from './views/Tools.vue'
6-
import Settings from './views/Settings.vue'
72

83
const router = createRouter({
94
history: createWebHashHistory(),
105
routes: [
116
{ path: '/', redirect: '/overview' },
12-
{ path: '/overview', component: Overview },
13-
{ path: '/sessions', component: Sessions },
14-
{ path: '/sessions/:id', component: SessionDetail, props: true },
15-
{ path: '/tools', component: Tools },
16-
{ path: '/settings', component: Settings }
7+
{ path: '/overview', component: () => import('./views/Overview.vue') },
8+
{ path: '/sessions', component: () => import('./views/Sessions.vue') },
9+
{ path: '/sessions/:id', component: () => import('./views/SessionDetail.vue'), props: true },
10+
{ path: '/tools', component: () => import('./views/Tools.vue') },
11+
{ path: '/settings', component: () => import('./views/Settings.vue') }
1712
]
1813
})
1914

‎frontend/src/views/Overview.vue‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
<script setup lang="ts">
2-
import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
2+
import { computed, nextTick, onBeforeUnmount, onMounted, ref, type DefineComponent } from 'vue'
33
import { useRouter } from 'vue-router'
4-
import * as echarts from 'echarts'
5-
import { message } from 'ant-design-vue'
4+
import AButton from 'ant-design-vue/es/button'
5+
import message from 'ant-design-vue/es/message'
6+
import ASpin from 'ant-design-vue/es/spin'
7+
import AntTable from 'ant-design-vue/es/table'
8+
import ATag from 'ant-design-vue/es/tag'
9+
import Typography from 'ant-design-vue/es/typography'
610
import {
711
BarChartOutlined,
812
ClockCircleOutlined,
@@ -29,15 +33,19 @@ import {
2933
type Session
3034
} from '../api'
3135
import { chartPalette, usageChartColors } from '../chartPalette'
36+
import { init, type ECharts } from '../chartRuntime'
3237
import { notifyAppDataChanged } from '../events'
3338
39+
const ATable = AntTable as unknown as DefineComponent
40+
const ATypographyText = Typography.Text
41+
3442
const router = useRouter()
3543
const loading = ref(true)
3644
const startupIndexing = ref(false)
3745
const overview = ref<Overview | null>(null)
3846
const settings = ref<Settings | null>(null)
3947
const chartEl = ref<HTMLDivElement | null>(null)
40-
let chart: echarts.ECharts | null = null
48+
let chart: ECharts | null = null
4149
4250
const hasIndexedData = computed(() => (overview.value?.totalSessions || 0) > 0)
4351
const sourcePathDisplay = computed(() => settings.value?.sourcePath || settings.value?.defaultSourcePath || '')
@@ -112,7 +120,7 @@ function renderChart() {
112120
return
113121
}
114122
if (!chartEl.value) return
115-
if (!chart) chart = echarts.init(chartEl.value)
123+
if (!chart) chart = init(chartEl.value)
116124
const days = dailyUsage.map((item) => item.date.slice(5))
117125
chart.setOption({
118126
color: usageChartColors,

‎frontend/src/views/SessionDetail.vue‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
<script setup lang="ts">
2-
import { computed, onMounted, ref } from 'vue'
2+
import { computed, onMounted, ref, type DefineComponent } from 'vue'
33
import { useRoute, useRouter } from 'vue-router'
4+
import AButton from 'ant-design-vue/es/button'
5+
import ACard from 'ant-design-vue/es/card'
6+
import AEmpty from 'ant-design-vue/es/empty'
7+
import ASpin from 'ant-design-vue/es/spin'
8+
import AntTable from 'ant-design-vue/es/table'
9+
import ATabs from 'ant-design-vue/es/tabs'
10+
import ATag from 'ant-design-vue/es/tag'
11+
import ATimeline from 'ant-design-vue/es/timeline'
12+
import ATooltip from 'ant-design-vue/es/tooltip'
13+
import Typography from 'ant-design-vue/es/typography'
414
import {
515
ArrowLeftOutlined,
616
ClockCircleOutlined,
@@ -21,6 +31,12 @@ import {
2131
type SessionDetail
2232
} from '../api'
2333
34+
const ATabPane = ATabs.TabPane
35+
const ATable = AntTable as unknown as DefineComponent
36+
const ATimelineItem = ATimeline.Item
37+
const ATypographyParagraph = Typography.Paragraph
38+
const ATypographyText = Typography.Text
39+
2440
const route = useRoute()
2541
const router = useRouter()
2642
const loading = ref(true)

‎frontend/src/views/Sessions.vue‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
11
<script setup lang="ts">
2-
import { computed, onMounted, ref } from 'vue'
2+
import { computed, onMounted, ref, type DefineComponent } from 'vue'
33
import { useRouter } from 'vue-router'
4+
import AButton from 'ant-design-vue/es/button'
5+
import AInput from 'ant-design-vue/es/input'
6+
import ASelect from 'ant-design-vue/es/select'
7+
import AntTable from 'ant-design-vue/es/table'
8+
import ATag from 'ant-design-vue/es/tag'
9+
import ATooltip from 'ant-design-vue/es/tooltip'
10+
import Typography from 'ant-design-vue/es/typography'
411
import { ArrowRightOutlined, ReloadOutlined, SearchOutlined } from '@ant-design/icons-vue'
512
import { api, formatCost, formatDateTime, formatDuration, formatNumber, sessionLabel, shortPath, type Session } from '../api'
613
14+
const ATable = AntTable as unknown as DefineComponent
15+
const ATypographyText = Typography.Text
16+
717
const router = useRouter()
818
const loading = ref(false)
919
const sessions = ref<Session[]>([])

‎frontend/src/views/Settings.vue‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
11
<script setup lang="ts">
2-
import { computed, onMounted, ref } from 'vue'
3-
import { message } from 'ant-design-vue'
2+
import { computed, onMounted, ref, type DefineComponent } from 'vue'
3+
import AButton from 'ant-design-vue/es/button'
4+
import AInput from 'ant-design-vue/es/input'
5+
import message from 'ant-design-vue/es/message'
6+
import ASpin from 'ant-design-vue/es/spin'
7+
import AntTable from 'ant-design-vue/es/table'
8+
import ATag from 'ant-design-vue/es/tag'
9+
import Typography from 'ant-design-vue/es/typography'
410
import { DatabaseOutlined, ReloadOutlined } from '@ant-design/icons-vue'
511
import { api, formatDateTime, formatDuration, formatNumber, type Settings } from '../api'
612
import { notifyAppDataChanged } from '../events'
713
14+
const ATextarea = AInput.TextArea
15+
const ATable = AntTable as unknown as DefineComponent
16+
const ATypographyText = Typography.Text
17+
818
const loading = ref(true)
919
const saving = ref(false)
1020
const indexing = ref(false)

‎frontend/src/views/Tools.vue‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
<script setup lang="ts">
2-
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
3-
import * as echarts from 'echarts'
2+
import { computed, onBeforeUnmount, onMounted, ref, type DefineComponent } from 'vue'
3+
import AButton from 'ant-design-vue/es/button'
4+
import ASpin from 'ant-design-vue/es/spin'
5+
import AntTable from 'ant-design-vue/es/table'
6+
import ATag from 'ant-design-vue/es/tag'
7+
import Typography from 'ant-design-vue/es/typography'
48
import { BarChartOutlined, ReloadOutlined } from '@ant-design/icons-vue'
59
import { api, formatDuration, formatNumber, type ToolStat } from '../api'
610
import { chartPalette, toolChartColors } from '../chartPalette'
11+
import { init, type ECharts } from '../chartRuntime'
12+
13+
const ATable = AntTable as unknown as DefineComponent
14+
const ATypographyText = Typography.Text
715
816
const loading = ref(true)
917
const tools = ref<ToolStat[]>([])
1018
const chartEl = ref<HTMLDivElement | null>(null)
11-
let chart: echarts.ECharts | null = null
19+
let chart: ECharts | null = null
1220
1321
const columns = [
1422
{ title: 'Tool', dataIndex: 'toolName', key: 'toolName' },
@@ -41,7 +49,7 @@ function renderChart() {
4149
chart = null
4250
return
4351
}
44-
if (!chart) chart = echarts.init(chartEl.value)
52+
if (!chart) chart = init(chartEl.value)
4553
const top = [...tools.value].sort((a, b) => b.calls - a.calls).slice(0, 12).reverse()
4654
chart.setOption({
4755
color: toolChartColors,

‎frontend/vite.config.ts‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,18 @@ export default defineConfig({
1111
},
1212
build: {
1313
outDir: 'dist',
14-
emptyOutDir: true
14+
emptyOutDir: true,
15+
chunkSizeWarningLimit: 550,
16+
rollupOptions: {
17+
output: {
18+
manualChunks(id) {
19+
const normalizedId = id.replace(/\\/g, '/')
20+
if (!normalizedId.includes('/node_modules/')) return
21+
if (normalizedId.includes('/node_modules/echarts/')) return 'vendor-echarts'
22+
if (normalizedId.includes('/node_modules/@ant-design/icons-vue/')) return 'vendor-icons'
23+
if (normalizedId.match(/\/node_modules\/(@vue|vue|vue-router)\//)) return 'vendor-vue'
24+
}
25+
}
26+
}
1527
}
1628
})

0 commit comments

Comments
 (0)