Splitting sandpack from main bundle #4256
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Size Changes📦 Next.js Bundle AnalysisThis analysis was generated by the next.js bundle analysis action 🤖 🎉 Global Bundle Size Decreased
DetailsThe global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster. Any third party scripts you have added directly to your app using the If you want further insight into what is behind the changes, give @next/bundle-analyzer a try! One Hundred Eighty-three Pages Changed SizeThe following pages changed size from the code in this PR compared to its base branch:
DetailsOnly the gzipped size is provided here based on an expert tip. First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If Any third party scripts you have added directly to your app using the Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this. |
|
Sandpack (without highlighting and output) renders, Then the fallback and then the complete sandpack... VideoScreen.Recording.2022-01-30.at.1.05.11.PM.mov |
gaearon
reviewed
Feb 1, 2022
harish-sethuraman
changed the title
gaearon
force-pushed
the
test-splitting
branch
from
40d62bb
to
7c8484c
Compare
|
Prerequisite fixes for this to work: |
gaearon
force-pushed
the
test-splitting
branch
from
52c53b1
to
26310fe
Compare
gaearon
force-pushed
the
test-splitting
branch
from
187f8fa
to
3b593f8
Compare
gaearon
force-pushed
the
test-splitting
branch
from
3b593f8
to
b06a343
Compare
gaearon
force-pushed
the
test-splitting
branch
from
dbf52db
to
be3bb2f
Compare
|
|
|
|
|
@danilowoz during the initial render the sandpack content is loaded but without the code formatting (it is loaded as string). Later we get the fallback and then the formatted code. Need help in finding why code is rendered as string during initial render. PS: Build fails you can try the same change in local
|
|
@harish-sethuraman currently, it's not possible, due to some CodeMirror limitations. But Sandpack is going to support it very soon, as we made some important progress in SSR support (codesandbox/sandpack#276). If you want to give it a try, take a look at this PR https://github.com/danilowoz/reactjs.org/pull/1 - but, please don't use it for production, there are a few breaking change comming in this implementation. |
harish-sethuraman
changed the title
|
This change splits sandpack and codeblock into separate chunks. So there are lot of components to test.
|
|
looks great. wanna press merge? if something breaks we'll roll back |
|
🚀 |
This was referenced Feb 18, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Tried to split the sandpack and added a fallback with suspense
Adding suspense to
Sandpackreduced~9.55KBAdding a wrapper to
codeBlockandSandpackreduced~150KBFallback preview here: https://beta-reactjs-org-namamgdvj-fbopensource.vercel.app/learn