Skip to content

feat(sandpack): split bundle - suspense #4112

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

Closed
wants to merge 1 commit into from
Closed

feat(sandpack): split bundle - suspense #4112

wants to merge 1 commit into from

Conversation

danilowoz
Copy link
Contributor

@gaearon, in order to make the Suspense work, Sandpack now has split its component into different chunks of files. But unfortunately, I wasn't able to make it work properly due to some issue related to Nextjs (next.config.js has a comment about it), so maybe you have some idea how to proceed and address it.

Let me know if everything is fine on our end, then I'll publish it.

@gaearon
Copy link
Member

gaearon commented Nov 17, 2021

Mind rebasing?

@danilowoz
Copy link
Contributor Author

@gaearon done, very curious to see how it will look like, so please let me know if you have any updates

@github-actions
Copy link

Size Changes

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

⚠️ Global Bundle Size Increased

Page Size (compressed)
global 91.55 KB (🟡 +386 B)
Details

The 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 <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

One Hundred Eighty-five Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page Size (compressed) First Load
/ 206.81 KB (🟡 +3.66 KB) 298.36 KB
/404 205.92 KB (🟡 +3.67 KB) 297.47 KB
/blog 37.32 KB (🟢 -604 B) 128.87 KB
/blog/2013/06/02/jsfiddle-integration 216.94 KB (🟡 +3.1 KB) 308.49 KB
/blog/2013/06/05/why-react 218.67 KB (🟡 +3.1 KB) 310.22 KB
/blog/2013/06/12/community-roundup 218.37 KB (🟡 +3.1 KB) 309.92 KB
/blog/2013/06/19/community-roundup-2 219.04 KB (🟡 +3.1 KB) 310.59 KB
/blog/2013/06/21/react-v0-3-3 217.09 KB (🟡 +3.1 KB) 308.64 KB
/blog/2013/06/27/community-roundup-3 219.41 KB (🟡 +3.1 KB) 310.95 KB
/blog/2013/07/02/react-v0-4-autobind-by-default 217.71 KB (🟡 +3.1 KB) 309.26 KB
/blog/2013/07/03/community-roundup-4 218.78 KB (🟡 +3.1 KB) 310.33 KB
/blog/2013/07/11/react-v0-4-prop-validation-and-default-values 217.58 KB (🟡 +3.1 KB) 309.12 KB
/blog/2013/07/17/react-v0-4-0 218.29 KB (🟡 +3.1 KB) 309.84 KB
/blog/2013/07/23/community-roundup-5 219.17 KB (🟡 +3.1 KB) 310.72 KB
/blog/2013/07/26/react-v0-4-1 217.05 KB (🟡 +3.1 KB) 308.6 KB
/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails 217.66 KB (🟡 +3.1 KB) 309.21 KB
/blog/2013/08/05/community-roundup-6 218.46 KB (🟡 +3.1 KB) 310.01 KB
/blog/2013/08/19/use-react-and-jsx-in-python-applications 217.67 KB (🟡 +3.1 KB) 309.22 KB
/blog/2013/08/26/community-roundup-7 218.63 KB (🟡 +3.1 KB) 310.18 KB
/blog/2013/09/24/community-roundup-8 220.07 KB (🟡 +3.1 KB) 311.61 KB
/blog/2013/10/03/community-roundup-9 219 KB (🟡 +3.1 KB) 310.55 KB
/blog/2013/10/16/react-v0.5.0 218.68 KB (🟡 +3.1 KB) 310.23 KB
/blog/2013/10/29/react-v0-5-1 217.04 KB (🟡 +3.1 KB) 308.59 KB
/blog/2013/11/06/community-roundup-10 220.66 KB (🟡 +3.1 KB) 312.21 KB
/blog/2013/11/18/community-roundup-11 219.74 KB (🟡 +3.1 KB) 311.29 KB
/blog/2013/12/18/react-v0.5.2-v0.4.2 217.51 KB (🟡 +3.1 KB) 309.06 KB
/blog/2013/12/19/react-v0.8.0 217.94 KB (🟡 +3.1 KB) 309.48 KB
/blog/2013/12/23/community-roundup-12 219.39 KB (🟡 +3.1 KB) 310.94 KB
/blog/2013/12/30/community-roundup-13 219.18 KB (🟡 +3.1 KB) 310.73 KB
/blog/2014/01/02/react-chrome-developer-tools 217.43 KB (🟡 +3.1 KB) 308.98 KB
/blog/2014/01/06/community-roundup-14 218.77 KB (🟡 +3.1 KB) 310.32 KB
/blog/2014/02/05/community-roundup-15 219.99 KB (🟡 +3.1 KB) 311.54 KB
/blog/2014/02/15/community-roundup-16 219.7 KB (🟡 +3.1 KB) 311.25 KB
/blog/2014/02/16/react-v0.9-rc1 220.1 KB (🟡 +3.1 KB) 311.65 KB
/blog/2014/02/20/react-v0.9 220.55 KB (🟡 +3.1 KB) 312.1 KB
/blog/2014/02/24/community-roundup-17 219.41 KB (🟡 +3.1 KB) 310.96 KB
/blog/2014/03/14/community-roundup-18 220.38 KB (🟡 +3.1 KB) 311.93 KB
/blog/2014/03/19/react-v0.10-rc1 218.69 KB (🟡 +3.1 KB) 310.24 KB
/blog/2014/03/21/react-v0.10 218.71 KB (🟡 +3.1 KB) 310.26 KB
/blog/2014/03/28/the-road-to-1.0 218.82 KB (🟡 +3.1 KB) 310.37 KB
/blog/2014/04/04/reactnet 217.47 KB (🟡 +3.1 KB) 309.02 KB
/blog/2014/05/06/flux 217.59 KB (🟡 +3.1 KB) 309.14 KB
/blog/2014/05/29/one-year-of-open-source-react 217.82 KB (🟡 +3.1 KB) 309.36 KB
/blog/2014/06/27/community-roundup-19 219.36 KB (🟡 +3.09 KB) 310.91 KB
/blog/2014/07/13/react-v0.11-rc1 219.74 KB (🟡 +3.1 KB) 311.29 KB
/blog/2014/07/17/react-v0.11 221 KB (🟡 +3.1 KB) 312.55 KB
/blog/2014/07/25/react-v0.11.1 217.95 KB (🟡 +3.1 KB) 309.5 KB
/blog/2014/07/28/community-roundup-20 219.5 KB (🟡 +3.1 KB) 311.05 KB
/blog/2014/07/30/flux-actions-and-the-dispatcher 219.14 KB (🟡 +3.1 KB) 310.69 KB
/blog/2014/08/03/community-roundup-21 219.17 KB (🟡 +3.1 KB) 310.72 KB
/blog/2014/09/03/introducing-the-jsx-specification 217.17 KB (🟡 +3.1 KB) 308.72 KB
/blog/2014/09/12/community-round-up-22 219.65 KB (🟡 +3.1 KB) 311.2 KB
/blog/2014/09/16/react-v0.11.2 217.95 KB (🟡 +3.1 KB) 309.5 KB
/blog/2014/09/24/testing-flux-applications 221.13 KB (🟡 +3.1 KB) 312.67 KB
/blog/2014/10/14/introducing-react-elements 220.08 KB (🟡 +3.1 KB) 311.63 KB
/blog/2014/10/16/react-v0.12-rc1 220.05 KB (🟡 +3.1 KB) 311.6 KB
/blog/2014/10/17/community-roundup-23 220.62 KB (🟡 +3.1 KB) 312.17 KB
/blog/2014/10/27/react-js-conf 217.22 KB (🟡 +3.1 KB) 308.77 KB
/blog/2014/10/28/react-v0.12 219.99 KB (🟡 +3.1 KB) 311.54 KB
/blog/2014/11/24/react-js-conf-updates 217.61 KB (🟡 +3.1 KB) 309.15 KB
/blog/2014/11/25/community-roundup-24 220.85 KB (🟡 +3.09 KB) 312.39 KB
/blog/2014/12/18/react-v0.12.2 217.64 KB (🟡 +3.1 KB) 309.18 KB
/blog/2014/12/19/react-js-conf-diversity-scholarship 218.03 KB (🟡 +3.1 KB) 309.58 KB
/blog/2015/01/27/react-v0.13.0-beta-1 219 KB (🟡 +3.1 KB) 310.54 KB
/blog/2015/02/18/react-conf-roundup-2015 220.98 KB (🟡 +3.1 KB) 312.53 KB
/blog/2015/02/20/introducing-relay-and-graphql 220.13 KB (🟡 +3.1 KB) 311.68 KB
/blog/2015/02/24/react-v0.13-rc1 219.04 KB (🟡 +3.1 KB) 310.59 KB
/blog/2015/02/24/streamlining-react-elements 221.59 KB (🟡 +3.09 KB) 313.14 KB
/blog/2015/03/03/react-v0.13-rc2 218.37 KB (🟡 +3.1 KB) 309.92 KB
/blog/2015/03/04/community-roundup-25 219.33 KB (🟡 +3.1 KB) 310.88 KB
/blog/2015/03/10/react-v0.13 219.65 KB (🟡 +3.1 KB) 311.2 KB
/blog/2015/03/16/react-v0.13.1 217.47 KB (🟡 +3.1 KB) 309.02 KB
/blog/2015/03/19/building-the-facebook-news-feed-with-relay 220.23 KB (🟡 +3.1 KB) 311.78 KB
/blog/2015/03/26/introducing-react-native 217.37 KB (🟡 +3.1 KB) 308.91 KB
/blog/2015/03/30/community-roundup-26 219.3 KB (🟡 +3.1 KB) 310.85 KB
/blog/2015/04/17/react-native-v0.4 218.21 KB (🟡 +3.1 KB) 309.76 KB
/blog/2015/04/18/react-v0.13.2 217.55 KB (🟡 +3.1 KB) 309.1 KB
/blog/2015/05/01/graphql-introduction 222.04 KB (🟡 +3.1 KB) 313.58 KB
/blog/2015/05/08/react-v0.13.3 217.44 KB (🟡 +3.1 KB) 308.99 KB
/blog/2015/05/22/react-native-release-process 217.59 KB (🟡 +3.1 KB) 309.14 KB
/blog/2015/06/12/deprecating-jstransform-and-react-tools 218.04 KB (🟡 +3.1 KB) 309.59 KB
/blog/2015/07/03/react-v0.14-beta-1 219.55 KB (🟡 +3.1 KB) 311.1 KB
/blog/2015/08/03/new-react-devtools-beta 218.15 KB (🟡 +3.1 KB) 309.7 KB
/blog/2015/08/11/relay-technical-preview 218.22 KB (🟡 +3.1 KB) 309.76 KB
/blog/2015/08/13/reacteurope-roundup 219.8 KB (🟡 +3.1 KB) 311.35 KB
/blog/2015/09/02/new-react-developer-tools 217.57 KB (🟡 +3.1 KB) 309.12 KB
/blog/2015/09/10/react-v0.14-rc1 223.21 KB (🟡 +3.05 KB) 314.75 KB
/blog/2015/09/14/community-roundup-27 219.73 KB (🟡 +3.1 KB) 311.28 KB
/blog/2015/10/01/react-render-and-top-level-api 218.7 KB (🟡 +3.1 KB) 310.25 KB
/blog/2015/10/07/react-v0.14 223.68 KB (🟡 +3.04 KB) 315.23 KB
/blog/2015/10/19/reactiflux-is-moving-to-discord 219.45 KB (🟡 +3.1 KB) 311 KB
/blog/2015/10/28/react-v0.14.1 217.46 KB (🟡 +3.1 KB) 309.01 KB
/blog/2015/11/02/react-v0.14.2 217.49 KB (🟡 +3.1 KB) 309.04 KB
/blog/2015/11/18/react-v0.14.3 217.61 KB (🟡 +3.1 KB) 309.16 KB
/blog/2015/12/04/react-js-conf-2016-diversity-scholarship 218.49 KB (🟡 +3.1 KB) 310.04 KB
/blog/2015/12/16/ismounted-antipattern 218.09 KB (🟡 +3.1 KB) 309.63 KB
/blog/2015/12/18/react-components-elements-and-instances 222.01 KB (🟡 +3.1 KB) 313.56 KB
/blog/2015/12/29/react-v0.14.4 217.28 KB (🟡 +3.1 KB) 308.83 KB
/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A 218.3 KB (🟡 +3.1 KB) 309.85 KB
/blog/2016/01/12/discontinuing-ie8-support 217.11 KB (🟡 +3.1 KB) 308.66 KB
/blog/2016/02/19/new-versioning-scheme 218.49 KB (🟡 +3.1 KB) 310.04 KB
/blog/2016/03/07/react-v15-rc1 221.18 KB (🟡 +3.04 KB) 312.73 KB
/blog/2016/03/16/react-v15-rc2 218.1 KB (🟡 +3.1 KB) 309.65 KB
/blog/2016/03/29/react-v0.14.8 217.24 KB (🟡 +3.1 KB) 308.79 KB
/blog/2016/04/07/react-v15 225.3 KB (🟡 +2.96 KB) 316.85 KB
/blog/2016/04/08/react-v15.0.1 217.99 KB (🟡 +3.1 KB) 309.54 KB
/blog/2016/07/11/introducing-reacts-error-code-system 217.71 KB (🟡 +3.1 KB) 309.26 KB
/blog/2016/07/13/mixins-considered-harmful 225.86 KB (🟡 +3.1 KB) 317.41 KB
/blog/2016/07/22/create-apps-with-no-configuration 221.19 KB (🟡 +3.09 KB) 312.74 KB
/blog/2016/08/05/relay-state-of-the-state 221.23 KB (🟡 +3.1 KB) 312.78 KB
/blog/2016/09/28/our-first-50000-stars 222.67 KB (🟡 +3.1 KB) 314.22 KB
/blog/2016/11/16/react-v15.4.0 220.63 KB (🟡 +3.09 KB) 312.17 KB
/blog/2017/04/07/react-v15.5.0 221.19 KB (🟡 +3.1 KB) 312.74 KB
/blog/2017/05/18/whats-new-in-create-react-app 220.59 KB (🟡 +3.09 KB) 312.14 KB
/blog/2017/06/13/react-v15.6.0 219.21 KB (🟡 +3.1 KB) 310.76 KB
/blog/2017/07/26/error-handling-in-react-16 219.56 KB (🟡 +3.1 KB) 311.11 KB
/blog/2017/09/08/dom-attributes-in-react-16 219.99 KB (🟡 +3.1 KB) 311.54 KB
/blog/2017/09/25/react-v15.6.2 218.33 KB (🟡 +3.1 KB) 309.87 KB
/blog/2017/09/26/react-v16.0 223.45 KB (🟡 +3.1 KB) 315 KB
/blog/2017/11/28/react-v16.2.0-fragment-support 221.36 KB (🟡 +3.09 KB) 312.91 KB
/blog/2017/12/07/introducing-the-react-rfc-process 217.91 KB (🟡 +3.1 KB) 309.46 KB
/blog/2017/12/15/improving-the-repository-infrastructure 233.7 KB (🟡 +3.09 KB) 325.25 KB
/blog/2018/03/01/sneak-peek-beyond-react-16 217.86 KB (🟡 +3.1 KB) 309.41 KB
/blog/2018/03/27/update-on-async-rendering 223.11 KB (🟡 +3.1 KB) 314.66 KB
/blog/2018/03/29/react-v-16-3 219.93 KB (🟡 +3.1 KB) 311.48 KB
/blog/2018/05/23/react-v-16-4 220.07 KB (🟡 +3.1 KB) 311.62 KB
/blog/2018/06/07/you-probably-dont-need-derived-state 223.73 KB (🟡 +3.1 KB) 315.27 KB
/blog/2018/08/01/react-v-16-4-2 218.71 KB (🟡 +3.1 KB) 310.26 KB
/blog/2018/09/10/introducing-the-react-profiler 220.32 KB (🟡 +3.09 KB) 311.87 KB
/blog/2018/10/01/create-react-app-v2 220.8 KB (🟡 +3.1 KB) 312.35 KB
/blog/2018/10/23/react-v-16-6 220 KB (🟡 +3.1 KB) 311.55 KB
/blog/2018/11/13/react-conf-recap 217.71 KB (🟡 +3.1 KB) 309.26 KB
/blog/2018/11/27/react-16-roadmap 223.91 KB (🟡 +3.09 KB) 315.46 KB
/blog/2018/12/19/react-v-16-7 218.84 KB (🟡 +3.1 KB) 310.39 KB
/blog/2019/02/06/react-v16.8.0 221.1 KB (🟡 +3.1 KB) 312.65 KB
/blog/2019/02/23/is-react-translated-yet 220.67 KB (🟡 +3.1 KB) 312.22 KB
/blog/2019/08/08/react-v16.9.0 223.6 KB (🟡 +3.09 KB) 315.15 KB
/blog/2019/08/15/new-react-devtools 218.21 KB (🟡 +3.1 KB) 309.75 KB
/blog/2019/10/22/react-release-channels 220.01 KB (🟡 +3.1 KB) 311.56 KB
/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense 224.72 KB (🟡 +3.1 KB) 316.27 KB
/blog/2020/02/26/react-v16.13.0 220.95 KB (🟡 +3.1 KB) 312.5 KB
/blog/2020/08/10/react-v17-rc 227.23 KB (🟡 +3.1 KB) 318.77 KB
/blog/all 53.44 KB (🟢 -589 B) 144.99 KB
/community 206.73 KB (🟡 +3.89 KB) 298.28 KB
/community/acknowledgements 207.7 KB (🟡 +3.66 KB) 299.25 KB
/community/meet-the-team 208.22 KB (🟡 +3.66 KB) 299.77 KB
/learn 215.21 KB (🟡 +3.67 KB) 306.76 KB
/learn/add-react-to-a-website 211.33 KB (🟡 +3.67 KB) 302.88 KB
/learn/adding-interactivity 213.13 KB (🟡 +3.67 KB) 304.68 KB
/learn/choosing-the-state-structure 218.88 KB (🟡 +3.67 KB) 310.43 KB
/learn/conditional-rendering 211.11 KB (🟡 +3.67 KB) 302.66 KB
/learn/describing-the-ui 210.32 KB (🟡 +3.67 KB) 301.87 KB
/learn/editor-setup 207.6 KB (🟡 +3.67 KB) 299.15 KB
/learn/escape-hatches 205.84 KB (🟡 +3.67 KB) 297.38 KB
/learn/extracting-state-logic-into-a-reducer 216.48 KB (🟡 +3.67 KB) 308.03 KB
/learn/importing-and-exporting-components 209.51 KB (🟡 +3.67 KB) 301.06 KB
/learn/installation 207.16 KB (🟡 +3.67 KB) 298.71 KB
/learn/javascript-in-jsx-with-curly-braces 209.58 KB (🟡 +3.67 KB) 301.13 KB
/learn/keeping-components-pure 213.72 KB (🟡 +3.67 KB) 305.27 KB
/learn/managing-state 212.43 KB (🟡 +3.67 KB) 303.98 KB
/learn/manipulating-the-dom-with-refs 214.35 KB (🟡 +3.67 KB) 305.9 KB
/learn/passing-data-deeply-with-context 213.86 KB (🟡 +3.67 KB) 305.41 KB
/learn/passing-props-to-a-component 213.29 KB (🟡 +3.67 KB) 304.83 KB
/learn/preserving-and-resetting-state 216.1 KB (🟡 +3.67 KB) 307.65 KB
/learn/queueing-a-series-of-state-updates 211.08 KB (🟡 +3.67 KB) 302.63 KB
/learn/react-developer-tools 207.04 KB (🟡 +3.67 KB) 298.58 KB
/learn/reacting-to-input-with-state 215.56 KB (🟡 +3.68 KB) 307.1 KB
/learn/referencing-values-with-refs 212.6 KB (🟡 +3.67 KB) 304.15 KB
/learn/render-and-commit 209.57 KB (🟡 +3.67 KB) 301.12 KB
/learn/rendering-lists 213.64 KB (🟡 +3.67 KB) 305.18 KB
/learn/responding-to-events 212.63 KB (🟡 +3.67 KB) 304.18 KB
/learn/scaling-up-with-reducer-and-context 210.66 KB (🟡 +3.67 KB) 302.21 KB
/learn/sharing-state-between-components 211.36 KB (🟡 +3.67 KB) 302.91 KB
/learn/start-a-new-react-project 208.01 KB (🟡 +3.67 KB) 299.56 KB
/learn/state-a-components-memory 216.81 KB (🟡 +3.67 KB) 308.35 KB
/learn/state-as-a-snapshot 210.63 KB (🟡 +3.67 KB) 302.17 KB
/learn/thinking-in-react 212.51 KB (🟡 +3.67 KB) 304.06 KB
/learn/updating-arrays-in-state 214.7 KB (🟡 +3.67 KB) 306.25 KB
/learn/updating-objects-in-state 214.41 KB (🟡 +3.67 KB) 305.96 KB
/learn/writing-markup-with-jsx 209.51 KB (🟡 +3.67 KB) 301.06 KB
/learn/your-first-component 210.41 KB (🟡 +3.67 KB) 301.96 KB
/reference 206.46 KB (🟡 +3.66 KB) 298.01 KB
/reference/reactdom 206.61 KB (🟡 +3.66 KB) 298.16 KB
/reference/render 207.95 KB (🟡 +3.67 KB) 299.5 KB
/reference/usestate 214.43 KB (🟡 +3.67 KB) 305.98 KB
Details

Only 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 next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

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.

import scrollIntoView from 'scroll-into-view-if-needed';

import {IconChevron} from 'components/Icon/IconChevron';
import {NavigationBar} from './NavigationBar';
import {Preview} from './Preview';
import {CustomTheme} from './Themes';

// const SandpackCodeEditor = React.lazy(() => import('@codesandbox/sandpack-react/dist/components/CodeEditor').then(module => module.SandpackCodeEditor) as any)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👀 Just curious, why have we used React.lazy instead of the dynamic import that is provided by Next.js?

https://nextjs.org/docs/advanced-features/dynamic-import

@danilowoz
Copy link
Contributor Author

I guess I can close this, as there is another PR exploring this possibility

@danilowoz danilowoz closed this Feb 14, 2022
@danilowoz danilowoz deleted the sandpack/split-bundle branch February 14, 2022 10:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants