Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In browser environments or edge computing environments, it would be desirable to make GraphQL execution more light-weight:
This PR is the start of an exploration in that direction. By piggy-backing on existing persisted query semantics, we can expose a command that will generate a TypeScript module from query text. For now it simply imports the full query, and inlines a pre-parsed query AST (instead of query text).
Currently it does not provide much (if any) value, since I believe that graphql-js is not written in such a way that the unused pieces of code (parser, validator, etc) are removed from the bundle if not used. However, this PR will help us start to explore those idea.
Bundle Size
I've found I can measure the bundle size using esbuild:
➜ yoga git:(persist) ✗ npx esbuild persisted/MyQuery.ts --bundle --outfile=out.js --tree-shaking=true out.js 165.5kb ⚡ Done in 12ms
Interestingly switching to more scoped imports makes the bundle size worse! Either way, it looks like some amount of tree-shaking is working.
165.5kb
: Baseline7.2kb
: No graphql imports at all, only product code (lower limit)161.9kb
: No schema graphql imports (still large!)76.2kb
No import ofexecute
(significant savings here)119.5kb
(48.8kb
minified): HackingassertSchema
out ofexecute
(not possible without hack)311.5kb
Replace pre-parsed query AST with direct call tographql
(which parses and then executes). This shows us how much size we are saving by parsing at persist time.Note: Sizes are not minified, but our goal here is to understand where the "meat" of the weight it, so that's okay for this phase. To test minified size, pass esbuild
--minify
.