danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/roe.dev. This is the code and content for my personal website, built in Nuxt.
roe.dev
1import { addVitePlugin, addWebpackPlugin, defineNuxtModule } from 'nuxt/kit'
2import { createUnplugin } from 'unplugin'
3import { parseURL } from 'ufo'
4import MagicString from 'magic-string'
5
6const plugin = createUnplugin(() => {
7 const replaced: string[] = []
8 return {
9 name: 'lazy-hydrate',
10 enforce: 'post',
11 transformInclude (id) {
12 return parseURL(id).pathname.endsWith('.vue')
13 },
14 transform (code, id) {
15 const chunks = code.matchAll(
16 /const _hoisted_(?<chunk>\d+)(?<value>[\s\S]*?)(;$|\n(?=const ))/gm,
17 )
18 const s = new MagicString(code)
19 const registeredChunks: Record<string, any> = {}
20 for (const chunk of chunks) {
21 if (!chunk.groups || !chunk.groups.value) continue
22 if (chunk.groups.value in registeredChunks) {
23 const replacementChunk = registeredChunks[chunk.groups.value]
24 s.replace(
25 new RegExp(`(?<!const )_hoisted_${chunk.groups.chunk}\\b`, 'g'),
26 `_hoisted_${replacementChunk}`,
27 )
28 replaced.push(chunk.groups.value)
29 // console.log('replaced', chunk.groups.value, id)
30 // if (chunk.groups.value[chunk.groups.value.length - 1] !== ';') {
31 // console.log({ code, chunk: chunk.groups.chunk })
32 // }
33 continue
34 }
35 registeredChunks[chunk.groups.value] = chunk.groups.chunk
36 }
37 if (s.hasChanged()) {
38 return {
39 code: s.toString(),
40 map: s.generateMap({ includeContent: true, source: id }),
41 }
42 }
43 },
44 buildEnd () {
45 console.log('Saved', Buffer.from(replaced.join('')).length, 'bytes')
46 },
47 }
48})
49
50export default defineNuxtModule({
51 meta: {
52 name: 'dedupe-hoisted-nodes',
53 },
54 setup () {
55 addVitePlugin(plugin.vite())
56 addWebpackPlugin(plugin.webpack())
57 },
58})