build: 调整分包

Barba828 · Jan 9, 2024 · 8b7a169 · 8b7a169
1 parent bdc829d
commit 8b7a169
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 19 deletions.
diff --git a/packages/buitar-editor/src/index.ts b/packages/buitar-editor/src/index.ts
@@ -1 +1,3 @@
-export { ABCEditor } from './app'
+import { ABCEditor } from './app'
+export { ABCEditor }
+export default ABCEditor
diff --git a/packages/buitar/src/components/pages-intro/index.tsx b/packages/buitar/src/components/pages-intro/index.tsx
@@ -4,7 +4,10 @@ import { useTopRoute } from '@/utils/hooks/use-routers'
 
 import styles from './pages-intro.module.scss'
 
-export const PagesIntro: FC = () => {
+/**
+ * 页面介绍
+ */
+const PagesIntro: FC = () => {
 	const curTopRoute = useTopRoute()
 	if (!curTopRoute?.id) {
 		return null
@@ -28,4 +31,5 @@ export const PagesIntro: FC = () => {
 	)
 }
 
+export { PagesIntro }
 export { PagesMeta } from './pages-meta'
diff --git a/packages/buitar/src/components/pages-intro/pages-meta.tsx b/packages/buitar/src/components/pages-intro/pages-meta.tsx
@@ -3,24 +3,22 @@ import { Helmet } from 'react-helmet-async'
 import { pagesIntroConfig } from '@/pages/pages.config'
 import { useTopRoute, useRouteMatch } from '@/utils/hooks/use-routers'
 
+/**
+ * 页面元数据
+ */
 export const PagesMeta: FC<{ title?: string; decsription?: string }> = ({
 	title,
 	decsription = '',
 }) => {
 	const curTopRoute = useTopRoute() // 一级路由
 	const curRoute = useRouteMatch()
-	if (!curTopRoute?.id) {
-		return null
-	}
+	const pageInfo = pagesIntroConfig.get(curTopRoute?.id || '') // 页面介绍信息
 
-	const pageInfo = pagesIntroConfig.get(curTopRoute.id)
-
-	if (!pageInfo) {
-		return null
-	}
-	const ogTitle = `${title || curRoute.name ||curTopRoute.name || pageInfo.title} - Buitar`
-	const ogDescription =
-		(decsription || `${pageInfo.title} - ${pageInfo.content.join(',') || 'Buitar'}`).slice(0, 150)
+	const ogTitle = `${title || curRoute.name || curTopRoute?.name || pageInfo?.title} - Buitar`
+	const ogDescription = (
+		decsription ||
+		`${pageInfo?.title || curRoute.name} - ${pageInfo?.content.join(',') || 'Buitar'}`
+	).slice(0, 150)
 	const ogImage = 'https://i1.wp.com/img.erpweb.eu.org/imgs/2024/01/63842433f6b0627a.png' // https://img.erpweb.eu.org/imgs/2024/01/63842433f6b0627a.png
 	return (
 		<Helmet>

diff --git a/packages/buitar/src/pages/home/home.tsx b/packages/buitar/src/pages/home/home.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 import { GuitarBoard, ChordCard, useBoardContext } from '@/components/guitar-board'
 import { Link } from 'react-router-dom'
 import { transChordTaps } from '@buitar/to-guitar'
-import { Icon } from '@/components'
+import { Icon, PagesMeta } from '@/components'
 import { routeConfig } from '@/pages/router'
 import { useIsMobile } from '@/utils/hooks/use-device'
 import { useRouteFind } from '@/utils/hooks/use-routers'
@@ -15,6 +15,7 @@ export const HomePage = () => {
 
 	return (
 		<div className={styles.container}>
+			<PagesMeta />
 			<Title />
 			{isMobile ? <MobileHome /> : <PcHome />}
 		</div>

diff --git a/packages/buitar/src/pages/router.ts b/packages/buitar/src/pages/router.ts
@@ -1,4 +1,5 @@
-import { RouteObject } from 'react-router-dom'
+import { lazy } from 'react'
+import { type RouteObject } from 'react-router-dom'
 
 import { HomePage } from './home'
 import { ChordAnalyzer } from './chord-analyzer'
@@ -21,8 +22,6 @@ import { IntervalList } from './play-tools/panels/interval-list-tool'
 import { SettingsPage } from './settings'
 import { NotFound } from './not-found'
 
-import { ABCEditor } from '@buitar/abc-editor'
-
 export const baseUrl = import.meta.env.BASE_URL || '/buitar/'
 
 export type RouteType = {
@@ -172,7 +171,7 @@ export const routeConfig: Array<RouteType> = [
 		id: 'ABCEditor',
 		path: `${baseUrl}abc-editor`,
 		type: 'menu',
-		Component: ABCEditor,
+		Component: lazy(() => import('@buitar/abc-editor')),
 	},
 	{
 		name: '设置',
@@ -185,7 +184,7 @@ export const routeConfig: Array<RouteType> = [
 		name: '404',
 		id: 'NotFound',
 		path: `${baseUrl}*`,
-		type:'',
+		type: '',
 		Component: NotFound,
 	},
 ]

diff --git a/packages/buitar/vite.config.ts b/packages/buitar/vite.config.ts
@@ -98,8 +98,16 @@ export default defineConfig({
 		minify: true,
 		rollupOptions: {
 			output: {
+				/**
+				 * 手动做一下拆包，避免超过500kb
+				 * tone 单独打包，避免 buitar 和 @buitar/tone-player 重复打包
+				 * vexflow 整包过大，单独打包 core 和字体 bravura
+				 * workspace 包单独打包，和tonejs不同，abcjs 包打在 @buitar/abc-editor 中
+				 */
 				manualChunks: {
 					tone: ['tone'],
+					'vexflow/core':['vexflow/core'],
+					'vexflow/bravura':['vexflow/bravura'],
 					'react-libs': ['react', 'react-dom', 'react-router-dom'],
 					'@buitar/abc-editor': ['@buitar/abc-editor'],
 					'@buitar/to-guitar': ['@buitar/to-guitar'],