refactor: adjust build input

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

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

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

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

Loading…
Cancel
Save