-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can we remove this now that the parcel pr was merged?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why no terser update?
return res; | ||
} | ||
|
||
function visitChildren(obj, fn) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this is so much nicer
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.