fix: reduced SPA build chunk sizes

Taskfile.yml

@@ -231,7 +231,7 @@ tasks:
     desc: Type-check and build the SPA into {{.DIST_DIR}}
     dir: web
     deps: [web:install]
-    sources: [src/**/*, public/**/*, index.html, vite.config.ts, tsconfig*.json, package.json, bun.lock]
+    sources: [src/**/*, public/**/*, vite/**/*, index.html, vite.config.ts, tsconfig*.json, package.json, bun.lock]
     generates: ['../{{.DIST_DIR}}/index.html']
     cmds:
       - bun run build

web/vite.config.ts

@@ -6,11 +6,15 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 import ui from '@nuxt/ui/vite'
 import { renewUi } from './src/theme/ui.config'
 import { lucideSubset } from './vite/lucideSubset'
+import { vendorChunk } from './vite/vendorChunks'
 
 export default defineConfig({
 	build: {
 		outDir: '../internal/infrastructure/assets/dist/',
 		emptyOutDir: true,
+		rollupOptions: {
+			output: { manualChunks: vendorChunk },
+		},
 	},
 	server: {
 		proxy: {

web/vite/vendorChunks.spec.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest'
+import { vendorChunk } from './vendorChunks'
+
+describe('vendorChunk', () => {
+	it.each([
+		['/app/node_modules/prosemirror-state/dist/index.js', 'prosemirror'],
+		['/app/node_modules/prosemirror-view/dist/index.js', 'prosemirror'],
+		['/app/node_modules/@tiptap/core/dist/index.js', 'tiptap'],
+		['/app/node_modules/markdown-it/index.mjs', 'markdown'],
+		['/app/node_modules/vue/dist/vue.runtime.esm-bundler.js', 'vue'],
+		['/app/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js', 'vue'],
+		['/app/node_modules/vue-router/dist/vue-router.mjs', 'vue'],
+		['/app/node_modules/pinia/dist/pinia.mjs', 'vue'],
+		['/app/node_modules/reka-ui/dist/index.js', 'reka'],
+		['/app/node_modules/@vueuse/core/index.mjs', 'ui-utils'],
+		['/app/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs', 'ui-utils'],
+		['C:\\app\\node_modules\\@tiptap\\core\\dist\\index.js', 'tiptap'],
+	])('puts %s in the %s chunk', (id, chunk) => {
+		expect(vendorChunk(id)).toBe(chunk)
+	})
+
+	it('leaves application code and unknown packages to the default splitting', () => {
+		expect(vendorChunk('/app/src/views/EditorView.vue')).toBeUndefined()
+		expect(vendorChunk('/app/node_modules/some-lib/index.js')).toBeUndefined()
+		expect(
+			vendorChunk('/app/node_modules/@nuxt/ui/dist/runtime/components/Button.vue'),
+		).toBeUndefined()
+	})
+
+	it('does not match packages that merely start with a group name', () => {
+		expect(vendorChunk('/app/node_modules/vue-demi/lib/index.mjs')).toBeUndefined()
+	})
+})

web/vite/vendorChunks.ts

@@ -0,0 +1,21 @@
+const groups: Array<[string, RegExp]> = [
+	[
+		'prosemirror',
+		/[\\/]node_modules[\\/](prosemirror-[^\\/]+|orderedmap|rope-sequence|w3c-keyname)[\\/]/,
+	],
+	[
+		'markdown',
+		/[\\/]node_modules[\\/](markdown-it|entities|mdurl|uc\.micro|linkify-it|punycode\.js)[\\/]/,
+	],
+	['tiptap', /[\\/]node_modules[\\/](@tiptap|linkifyjs)[\\/]/],
+	['vue', /[\\/]node_modules[\\/](vue|@vue|vue-router|pinia)[\\/]/],
+	['reka', /[\\/]node_modules[\\/]reka-ui[\\/]/],
+	['ui-utils', /[\\/]node_modules[\\/](@internationalized|@floating-ui|@vueuse|@iconify)[\\/]/],
+]
+
+export function vendorChunk(id: string): string | undefined {
+	for (const [name, pattern] of groups) {
+		if (pattern.test(id)) return name
+	}
+	return undefined
+}