Significant Increase in Package Size with nuxt/seo Impeding Cloudflare Deployment

[Jan]

Describe the bug

I am experiencing a significant increase in the package size when using the nuxt/seo package, which is preventing me from deploying my Nuxt.js application on Cloudflare. The size of the build increases drastically from 174kB to 2.02 MB (gzip) when the nuxt/seo package is added, compared to using the standard Nuxt.js configuration.

Steps to Reproduce

1. Clone the Nuxt.js starter template from https://github.com/nuxt/starter/tree/ui
2. Install dependencies and set up the project using PNPM.
3. Build the project with the Nitro preset set to 'cloudflare' using the command pnpm build --preset cloudflare. Observe the resulting build size (approximately 174kB).
4. Add the nuxt/seo package to the project.
5. Rebuild the project using the same command. The build size now increases to approximately 2.02 MB when gzip compression is applied.

Expected Behavior

The addition of the nuxt/seo package should not significantly increase the build size, allowing for efficient deployment on platforms like Cloudflare.

System / Nuxt Info

- Operating System: Windows 11
- Node Version:     v20.12.2
- Nuxt Version:     3.10.1
- CLI Version:      3.10.0
- Nitro Version:    2.8.1
- Package Manager:  pnpm@9.0.4
- Builder:          -
- User Config:      devtools, modules, nitro
- Runtime Modules:  @nuxt/ui@2.15.2, @nuxtjs/seo@2.0.0-rc.10
- Build Modules:    -
- Deployment target: Cloudflare

[Jan]

Alright, I've just come across the FAQ section "Why does my production build go up so much?" which explains the size increase due to server-side features and suggests disabling unused modules. This is quite helpful. I will proceed to disable the ogImage module as it seems to contribute significantly to the size increase.

I will leave this issue open for now, @harlan-zw, for you to decide. Perhaps some further optimization to the build size could still be beneficial if possible?

[Harlan Wilton]

It's not possible to bring it down further as this is a direct result of the WASM's required to build OG images at runtime in a worker environment.

The only solution is to pretender the images or offload the image processing to a different server, which I do have some plans for in the future.

[segato]

Hey @harlan-zw, How can I pre-render the images? I read in the documentation that I should use chromium renderer, but what about after that? There is any example I could follow?

[Harlan Wilton]

Please follow nuxt-modules/og-image#210 (comment)

You would then just use route rules to prerender whichever apply.

export default defineNuxtConfig({
  routeRules: {
   '/**': {
     prerender: true
   }
  }
})