Process Serverless Output with Vite

[zachleat]

I previously thought this wasn’t going to work because Vite was too big but I think for some projects it might work?

Would need a combination of using rollup plugin-virtual to pass strings into rollup config
rollup/rollup#3276 (comment)
https://github.com/rollup/plugins/tree/master/packages/virtual

And vite’s build.write false option to get the rollup output back as an object
https://vitejs.dev/config/#build-write

[AleksandrHovhannisyan]

This would be wonderful! I think it may also pave the way for Slinkity to be able to support Serverless, but maybe that's a separate issue (@Holben888 sorry to summon you—what do you think?).

(Use case: I want to be able to support URL sharing and server-render React components based on query params: AleksandrHovhannisyan/fluid-type-scale-calculator#17)

[bholmesdev]

Oh ho ho, did somebody say build.write: false? That's how we server render components in Slinkity today! I think expanding this usage to HTML parsing could aid in serverless as well. Here's our Vite build setup for reference.

We also wrote a thin abstraction called toCommonJSModule to return modules in-memory depending on the environment. This uses vite.server.ssrLoadModule when in development, and vite.build with write: false for production. It also uses a build helper we wrote to efficiently batch multiple build requests for the same module. Not sure if all of this will be of use, but I wanted to call them out for reference 😁

[bholmesdev]

Also, an important caveat I want to mention: Vite production builds aren't the fastest around. Since they target HTML files as the entrypoint and could compile SCSS files on-the-fly as well, it's easy to creep into 1 second or more for a single page. I'm curious if certain files like SCSS should be processed ahead-of-time / before serverless requests, with the caveat that you can't use template strings to dynamically import scss.

<!--allowed and bundled at build time, before serverless requests-->
<link rel="stylesheet" href="/styles/staticPath.scss">

<!--not allowed!-->
<link rel="stylesheet" href="/styles/{{ params.dynamicPath }}.scss">

[bholmesdev]

Also want to call out that Astro has 100% ruled out Vite in a serverless environment. Any bundling or analysis of non-JS assets occurs at build time, while frontmatter (essentially 11ty's data cascade) is free to process on serverless.

[AleksandrHovhannisyan]

Also want to call out that Astro has 100% ruled out Vite in a serverless environment.

@bholmesdev Does this mean that the use case I described is not possible?

[bholmesdev]

@AleksandrHovhannisyan So it's not impossible, just not recommended as the only option. the length of Vite builds and the size of the bundle make it a no-go for certain use cases. We definitely need a Vite-less option for serverless alongside the Vite-ful solution at least.