Optimize docs build performance #5228
Conversation
… optimize-build # Conflicts: # yarn.lock
| @@ -54,7 +54,7 @@ function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>, | |||
| props = useSlotProps(props, 'button'); | |||
| props = disablePendingProps(props); | |||
| let { | |||
| elementType: ElementType = 'button', | |||
| elementType: Element = 'button', | |||
There was a problem hiding this comment.
This is to accommodate the docs generator. It was getting confused between ElementType declared here and the one used in the type parameter. Found by the new console.log added in DocsPackager.
| } | ||
|
|
||
| let [asset, code] = assets.get(id); | ||
| let moduleFunction = vm.compileFunction(code, ['exports', 'require', 'module', '__dirname', '__filename'], { |
There was a problem hiding this comment.
This simulates a CommonJS environment. I originally tried to use node's module to do this by creating synthetic modules, but it had a memory leak so I went to this so we have control over when these modules are evicted from the cache.
|
Build successful! 🎉 |
| +module.exports = function() { | ||
| + return { | ||
| + postcssPlugin: 'postcss-custom-properties-mapping', | ||
| + OnceExit: async function (root, result) { | ||
| + await fetchVars(); | ||
| + fetchVarsPromise ??= fetchVars(); | ||
| + await fetchVarsPromise; |
There was a problem hiding this comment.
This ensures we only parse all of the spectrum variables once per build instead of for every individual file.
There was a problem hiding this comment.
can we remove this now that the parcel pr was merged?
There was a problem hiding this comment.
no, this is unrelated to parcel.
|
Build successful! 🎉 |
| @@ -72,14 +72,14 @@ | |||
| "@babel/preset-typescript": "^7.12.7", | |||
| "@babel/register": "^7.12.10", | |||
| "@octokit/rest": "*", | |||
| "@parcel/optimizer-data-url": "^2.9.1", | |||
| "@parcel/optimizer-data-url": "^2.10.0", | |||
| return res; | ||
| } | ||
|
|
||
| function visitChildren(obj, fn) { |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
## API Changes
unknown top level export { type: 'any' } |
The docs were getting really slow to build so I did some performance optimizations. This PR is in combination with work done in Parcel. Will update Parcel in this PR once the changes are released.
parcel-bundler/parcel#9266 optimizes the bundling/code splitting algorithm, bringing a cold build from 60s to 39s, and a rebuild on change of an MDX file (when a dependency is added) from ~22s to ~4s.
On top of that, this PR optimizes the DocsPackager and SSGPackager parcel plugins. DocsPackager now uses less generic types when traversing over the type objects which JS engines can optimize better. The SSG optimizer previously ran the entire compiled bundle for MDX pages in order to generate HTML. However, many assets within these bundles are duplicated, leading to lots of extra JS parsing time. This is now a packager plugin instead of an optimizer, so we never even create a JS bundle. Instead the packager runs the code for each asset individually (only once per build), and outputs HTML directly. These optimizations further drop the cold build to ~27s and rebuilds to ~2.8s.