refactor: adjust build input

pull/18/head
Evan You 4 years ago
parent a8735646e8
commit 38c6fcaa44

@ -24,9 +24,9 @@ export async function build(buildOptions: BuildOptions = {}) {
)
console.log('rendering pages...')
const indexChunk = clientResult.assets.find(
const appChunk = clientResult.assets.find(
(chunk) =>
chunk.type === 'chunk' && chunk.fileName.match(/^index\.\w+\.js$/)
chunk.type === 'chunk' && chunk.fileName.match(/^app\.\w+\.js$/)
) as OutputChunk
// We embed the hash map string into each page directly so that it doesn't
@ -40,7 +40,7 @@ export async function build(buildOptions: BuildOptions = {}) {
siteConfig,
page,
clientResult,
indexChunk,
appChunk,
pageToHashMap,
hashMapStirng
)

@ -13,6 +13,7 @@ import {
BuildResult
} from 'vite'
const hashRE = /\.(\w+)\.js$/
const staticInjectMarkerRE = /\b(const _hoisted_\d+ = \/\*#__PURE__\*\/createStaticVNode)\("(.*)", (\d+)\)/g
const staticStripRE = /__VP_STATIC_START__.*?__VP_STATIC_END__/g
const staticRestoreRE = /__VP_STATIC_(START|END)__/g
@ -81,37 +82,37 @@ export async function bundle(
// for each .md entry chunk, adjust its name to its correct path.
for (const name in bundle) {
const chunk = bundle[name]
if (isPageChunk(chunk)) {
// foo/bar.md -> foo_bar.md.js
const hash = isClientBuild
? chunk.fileName.match(/\.(\w+)\.js$/)![1]
: ``
const pageName = slash(
path.relative(root, chunk.facadeModuleId)
).replace(/\//g, '_')
chunk.fileName = `${pageName}${hash ? `.${hash}` : ``}.js`
if (isPageChunk(chunk) && isClientBuild) {
// record page -> hash relations
const hash = chunk.fileName.match(hashRE)![1]
const pageName = chunk.fileName.replace(hashRE, '')
pageToHashMap[pageName] = hash
if (isClientBuild) {
// record page -> hash relations
pageToHashMap[pageName] = hash
// inject another chunk with the content stripped
bundle[name + '-lean'] = {
...chunk,
fileName: chunk.fileName.replace(/\.js$/, '.lean.js'),
code: chunk.code.replace(staticStripRE, ``)
}
// remove static markers from orginal code
chunk.code = chunk.code.replace(staticRestoreRE, '')
// inject another chunk with the content stripped
bundle[name + '-lean'] = {
...chunk,
fileName: chunk.fileName.replace(/\.js$/, '.lean.js'),
code: chunk.code.replace(staticStripRE, ``)
}
// remove static markers from orginal code
chunk.code = chunk.code.replace(staticRestoreRE, '')
}
}
}
}
const appEntry = path.resolve(APP_PATH, 'index.js')
// convert page files to absolute paths
const pages = config.pages.map((file) => path.resolve(root, file))
// define custom rollup input
// this is a multi-entry build - every page is considered an entry chunk
// the loading is done via filename conversion rules so that the
// metadata doesn't need to be included in the main chunk.
const input: Record<string, string> = {
app: path.resolve(APP_PATH, 'index.js')
}
config.pages.forEach((file) => {
// page filename conversion
// foo/bar.md -> foo_bar.md
input[slash(file).replace(/\//g, '_')] = path.resolve(root, file)
})
// resolve options to pass to vite
const { rollupInputOptions = {}, rollupOutputOptions = {} } = options
@ -127,11 +128,7 @@ export async function bundle(
},
rollupInputOptions: {
...rollupInputOptions,
// use our custom input
// this is a multi-entry build - every page is considered an entry chunk
// the loading is done via filename conversion rules so that the
// metadata doesn't need to be included in the main chunk.
input: [appEntry, ...pages],
input,
// important so that each page chunk and the index export things for each
// other
preserveEntrySignatures: 'allow-extension',

@ -12,15 +12,11 @@ export async function renderPage(
config: SiteConfig,
page: string, // foo.md
result: BuildResult,
indexChunk: OutputChunk,
appChunk: OutputChunk,
pageToHashMap: Record<string, string>,
hashMapStirng: string
) {
const { createApp } = require(path.join(
config.tempDir,
ASSETS_DIR,
'index.js'
))
const { createApp } = require(path.join(config.tempDir, ASSETS_DIR, 'app.js'))
const { app, router } = createApp()
const routePath = `/${page.replace(/\.md$/, '')}`
router.go(routePath)
@ -47,9 +43,9 @@ export async function renderPage(
// resolve imports for index.js + page.md.js and inject script tags for
// them as well so we fetch everything as early as possible without having
// to wait for entry chunks to parse
...resolvePageImports(config, page, result, indexChunk),
...resolvePageImports(config, page, result, appChunk),
pageClientJsFileName,
indexChunk.fileName
appChunk.fileName
]
.map((file) => {
return `<link rel="modulepreload" href="${assetPath}${file}">`
@ -71,9 +67,7 @@ export async function renderPage(
<body>
<div id="app">${content}</div>
<script>__VP_HASH_MAP__ = JSON.parse(${hashMapStirng})</script>
<script type="module" async src="${assetPath}${
indexChunk.fileName
}"></script>
<script type="module" async src="${assetPath}${appChunk.fileName}"></script>
</body>
</html>`.trim()
const htmlFileName = path.join(config.outDir, page.replace(/\.md$/, '.html'))

Loading…
Cancel
Save