Skip to content

Commit f6d92c0

Browse files
kermanxkermanx
committed
perf: pre bundle client
1 parent 0436ca6 commit f6d92c0

9 files changed

Lines changed: 132 additions & 8 deletions

File tree

‎packages/client/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@
2727
"engines": {
2828
"node": ">=18.0.0"
2929
},
30+
"scripts": {
31+
"build": "vite build",
32+
"dev": "vite build --watch"
33+
},
3034
"dependencies": {
3135
"@antfu/utils": "^0.7.10",
3236
"@iconify-json/carbon": "^1.1.36",

‎packages/client/uno.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import '@unocss/reset/tailwind.css'
2+
import 'uno:preflights.css'
3+
import 'uno:typography.css'
4+
import 'uno:shortcuts.css'
5+
import 'uno.css'

‎packages/client/vite.config.ts‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import { fileURLToPath } from 'node:url'
2+
import { basename } from 'node:path'
3+
import { defineConfig, normalizePath } from 'vite'
4+
import UnoCSS from 'unocss/vite'
5+
import type { ResolvedSlidevOptions, SlidevPluginOptions } from '@slidev/types'
6+
import IconsResolver from 'unplugin-icons/resolver'
7+
import Components from 'unplugin-vue-components/vite'
8+
import fg from 'fast-glob'
9+
import { createInspectPlugin } from '../slidev/node/vite/inspect'
10+
import { createIconsPlugin } from '../slidev/node/vite/icons'
11+
import { createVuePlugin } from '../slidev/node/vite/vue'
12+
13+
const absolute = (path: string) => normalizePath(fileURLToPath(new URL(path, import.meta.url)))
14+
const clientRoot = absolute('.')
15+
16+
const options = {
17+
clientRoot,
18+
roots: [],
19+
mode: 'build',
20+
inspect: true,
21+
} as unknown as ResolvedSlidevOptions
22+
23+
const pluginOptions = {
24+
components: {
25+
dts: false,
26+
},
27+
} as SlidevPluginOptions
28+
29+
const defines = [
30+
'__DEV__',
31+
'__SLIDEV_CLIENT_ROOT__',
32+
'__SLIDEV_HASH_ROUTE__',
33+
'__SLIDEV_FEATURE_DRAWINGS__',
34+
'__SLIDEV_FEATURE_EDITOR__',
35+
'__SLIDEV_FEATURE_DRAWINGS_PERSIST__',
36+
'__SLIDEV_FEATURE_RECORD__',
37+
'__SLIDEV_FEATURE_PRESENTER__',
38+
'__SLIDEV_FEATURE_PRINT__',
39+
'__SLIDEV_FEATURE_WAKE_LOCK__',
40+
'__SLIDEV_HAS_SERVER__',
41+
]
42+
43+
const builtinComponents = Object.fromEntries(fg.sync('*', {
44+
cwd: absolute('./builtin'),
45+
absolute: true,
46+
}).map(i => [`components/${basename(i).replace(/\..*$/, '')}`, i]))
47+
48+
const layoutComponents = Object.fromEntries(fg.sync('*', {
49+
cwd: absolute('./layouts'),
50+
absolute: true,
51+
}).map(i => [`layouts/${basename(i).replace(/\..*$/, '')}`, i]))
52+
53+
const externals = [
54+
'#slidev/',
55+
'/@slidev/',
56+
'@slidev/',
57+
'server-reactive:',
58+
'vue',
59+
'vue-router',
60+
'monaco-editor',
61+
'typescript',
62+
'mermaid',
63+
'~icons/',
64+
]
65+
66+
export default defineConfig({
67+
plugins: [
68+
createInspectPlugin(options, pluginOptions),
69+
UnoCSS(),
70+
createVuePlugin(options, pluginOptions),
71+
Components({
72+
extensions: ['vue', 'ts'],
73+
dirs: [absolute('./builtin')],
74+
resolvers: [
75+
IconsResolver({
76+
prefix: '',
77+
customCollections: Object.keys(pluginOptions.icons?.customCollections || []),
78+
}),
79+
],
80+
dts: false,
81+
}),
82+
createIconsPlugin(options, pluginOptions),
83+
{
84+
name: 'slidev:flags',
85+
enforce: 'pre',
86+
transform(code, id) {
87+
if (id.match(/\.vue($|\?)/)) {
88+
const original = code
89+
defines.forEach((name) => {
90+
code = code.replaceAll(`_ctx.${name}`, name)
91+
})
92+
if (original !== code)
93+
return code
94+
}
95+
},
96+
},
97+
],
98+
build: {
99+
lib: {
100+
entry: {
101+
'main': absolute('./main.ts'),
102+
'index': absolute('./index.ts'),
103+
'uno.css': absolute('./uno.ts'),
104+
...builtinComponents,
105+
...layoutComponents,
106+
},
107+
formats: ['es'],
108+
},
109+
target: 'esnext',
110+
rollupOptions: {
111+
external: source => externals.some(i => source.startsWith(i)),
112+
},
113+
},
114+
})

‎packages/slidev/node/commands/shared.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export async function getIndexHtml({ mode, entry, clientRoot, roots, data }: Res
6666
head += `\n<link rel="stylesheet" href="${generateGoogleFontsUrl(data.config.fonts)}" type="text/css">`
6767

6868
main = main
69-
.replace('__ENTRY__', toAtFS(join(clientRoot, 'main.ts')))
69+
.replace('__ENTRY__', toAtFS(join(clientRoot, 'dist/main.js')))
7070
.replace('<!-- head -->', head)
7171
.replace('<!-- body -->', body)
7272

‎packages/slidev/node/options.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,8 @@ export async function createDataUtils(data: SlidevData, clientRoot: string, root
8484

8585
const layouts: Record<string, string> = {}
8686

87-
for (const root of [clientRoot, ...roots]) {
88-
const layoutPaths = fg.sync('layouts/**/*.{vue,ts}', {
87+
for (const root of [path.join(clientRoot, 'dist'), ...roots]) {
88+
const layoutPaths = fg.sync('layouts/**/*.{vue,ts,js}', {
8989
cwd: root,
9090
absolute: true,
9191
suppressErrors: true,

‎packages/slidev/node/virtual/styles.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export const templateStyle: VirtualModuleTemplate = {
1717
`import "${resolveUrlOfClient('styles/code.css')}"`,
1818
`import "${resolveUrlOfClient('styles/katex.css')}"`,
1919
`import "${resolveUrlOfClient('styles/transitions.css')}"`,
20+
`import "${resolveUrlOfClient('dist/style.css')}"`,
2021
]
2122

2223
for (const root of roots) {

‎packages/slidev/node/vite/compilerFlagsVue.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ export function createVueCompilerFlagsPlugin(
1515
name: 'slidev:flags',
1616
enforce: 'pre',
1717
transform(code, id) {
18-
if (id.match(/\.vue($|\?)/)) {
18+
if (id.match(/\.vue($|\?)/) || id.includes('client/dist')) {
1919
const original = code
2020
define.forEach(([from, to]) => {
21-
code = code.replace(new RegExp(from, 'g'), to)
21+
code = code.replaceAll(from, to)
2222
})
2323
if (original !== code)
2424
return code

‎packages/slidev/node/vite/components.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export function createComponentsPlugin(
1111
extensions: ['vue', 'md', 'js', 'ts', 'jsx', 'tsx'],
1212

1313
dirs: [
14-
join(clientRoot, 'builtin'),
14+
join(clientRoot, 'dist/components'),
1515
...roots.map(i => join(i, 'components')),
1616
],
1717

‎packages/slidev/node/vite/extendConfig.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export function createConfigPlugin(options: ResolvedSlidevOptions): Plugin {
6868
})
6969
return {
7070
name: 'slidev:config',
71-
async config(config) {
71+
async config() {
7272
const injection: InlineConfig = {
7373
define: getDefine(options),
7474
resolve: {
@@ -188,7 +188,7 @@ export function createConfigPlugin(options: ResolvedSlidevOptions): Plugin {
188188
injection.root = options.cliRoot
189189
}
190190

191-
return mergeConfig(injection, config)
191+
return injection
192192
},
193193
configureServer(server) {
194194
// serve our index.html after vite history fallback

0 commit comments

Comments
 (0)