8aa9a52c36
### Issue When the og module is a shared module being imported in both page and metadata image routes, it will be shared in the module graph. Especially in the edge runtime, since the `default` export is being used in the metadata image routes, then it can't be easily tree-shaked out. ### Solution Separate the image route to a separate layer which won't share modules with the page, so that image route is always bundling separately and the `@vercel/og` module only stays inside in that layer, when import image metadata named exports (size / alt / etc..) it can be still tree shaked. Co-authored-by: Jiachi Liu <4800338+huozhi@users.noreply.github.com>
33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import { createNextDescribe } from 'e2e-utils'
|
|
import imageSize from 'image-size'
|
|
|
|
createNextDescribe(
|
|
'app dir - Metadata API on the Edge runtime',
|
|
{
|
|
files: __dirname,
|
|
},
|
|
({ next, isNextStart }) => {
|
|
describe('OG image route', () => {
|
|
if (isNextStart) {
|
|
it('should not bundle `ImageResponse` into the page worker', async () => {
|
|
const pageBundle = await next.readFile('.next/server/app/page.js')
|
|
expect(pageBundle).not.toContain('ImageResponse')
|
|
|
|
const sharedPageBundle = await next.readFile(
|
|
'.next/server/app/another/page.js'
|
|
)
|
|
expect(sharedPageBundle).not.toContain('ImageResponse')
|
|
})
|
|
}
|
|
})
|
|
|
|
it('should render OpenGraph image meta tag correctly', async () => {
|
|
const html$ = await next.render$('/')
|
|
const ogUrl = new URL(html$('meta[property="og:image"]').attr('content'))
|
|
const imageBuffer = await (await next.fetch(ogUrl.pathname)).buffer()
|
|
|
|
const size = imageSize(imageBuffer)
|
|
expect([size.width, size.height]).toEqual([1200, 630])
|
|
})
|
|
}
|
|
)
|