Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[Beta] Drop next/dynamic usage #4695

Merged
merged 1 commit into from
May 26, 2022
Merged

[Beta] Drop next/dynamic usage #4695

merged 1 commit into from
May 26, 2022

Conversation

SukkaW
Copy link
Contributor

@SukkaW SukkaW commented May 26, 2022 •
edited

Ref: vercel/next.js#37197 (comment)

Replace the usage of next/dynamic with React.lazy (next/dynamic with { suspense: true } use React.lazy directly under the hood).

By dropping next/dynamic, we can also remove react-lodable client-side implementation (which is for { suspense: false }) from emitted bundle (see vercel/next.js#37197 (comment)).

@github-actions github-actions bot added the beta label May 26, 2022
@github-actions
Copy link

Size Changes

📦 Next.js Bundle Analysis

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

One Hundred Eighty-seven Pages Changed Size

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

Page Size (compressed) First Load
/ 47.75 KB (🟢 -1.34 KB) 132.32 KB
/404 46.85 KB (🟢 -1.34 KB) 131.42 KB
/apis 47.63 KB (🟢 -1.34 KB) 132.2 KB
/apis/createcontext 49.38 KB (🟢 -1.34 KB) 133.95 KB
/apis/reactdom 47.57 KB (🟢 -1.34 KB) 132.14 KB
/apis/render 49.61 KB (🟢 -1.34 KB) 134.18 KB
/apis/usecontext 55.35 KB (🟢 -1.34 KB) 139.91 KB
/apis/usereducer 54.97 KB (🟢 -1.34 KB) 139.54 KB
/apis/useref 52.68 KB (🟢 -1.34 KB) 137.25 KB
/apis/usestate 58.61 KB (🟢 -1.34 KB) 143.18 KB
/blog/2013/06/02/jsfiddle-integration 57.66 KB (🟢 -1.34 KB) 142.23 KB
/blog/2013/06/05/why-react 59.39 KB (🟢 -1.34 KB) 143.95 KB
/blog/2013/06/12/community-roundup 59.09 KB (🟢 -1.34 KB) 143.66 KB
/blog/2013/06/19/community-roundup-2 59.75 KB (🟢 -1.34 KB) 144.32 KB
/blog/2013/06/21/react-v0-3-3 57.8 KB (🟢 -1.34 KB) 142.37 KB
/blog/2013/06/27/community-roundup-3 60.12 KB (🟢 -1.34 KB) 144.69 KB
/blog/2013/07/02/react-v0-4-autobind-by-default 58.42 KB (🟢 -1.34 KB) 142.99 KB
/blog/2013/07/03/community-roundup-4 59.49 KB (🟢 -1.34 KB) 144.06 KB
/blog/2013/07/11/react-v0-4-prop-validation-and-default-values 58.3 KB (🟢 -1.34 KB) 142.86 KB
/blog/2013/07/17/react-v0-4-0 59.01 KB (🟢 -1.34 KB) 143.57 KB
/blog/2013/07/23/community-roundup-5 59.88 KB (🟢 -1.34 KB) 144.45 KB
/blog/2013/07/26/react-v0-4-1 57.77 KB (🟢 -1.34 KB) 142.34 KB
/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails 58.37 KB (🟢 -1.34 KB) 142.94 KB
/blog/2013/08/05/community-roundup-6 59.18 KB (🟢 -1.34 KB) 143.75 KB
/blog/2013/08/19/use-react-and-jsx-in-python-applications 58.39 KB (🟢 -1.34 KB) 142.95 KB
/blog/2013/08/26/community-roundup-7 59.35 KB (🟢 -1.34 KB) 143.92 KB
/blog/2013/09/24/community-roundup-8 60.78 KB (🟢 -1.34 KB) 145.35 KB
/blog/2013/10/03/community-roundup-9 59.71 KB (🟢 -1.34 KB) 144.28 KB
/blog/2013/10/16/react-v0.5.0 59.4 KB (🟢 -1.34 KB) 143.97 KB
/blog/2013/10/29/react-v0-5-1 57.76 KB (🟢 -1.34 KB) 142.33 KB
/blog/2013/11/06/community-roundup-10 61.38 KB (🟢 -1.34 KB) 145.94 KB
/blog/2013/11/18/community-roundup-11 60.46 KB (🟢 -1.34 KB) 145.02 KB
/blog/2013/12/18/react-v0.5.2-v0.4.2 58.23 KB (🟢 -1.34 KB) 142.8 KB
/blog/2013/12/19/react-v0.8.0 58.65 KB (🟢 -1.34 KB) 143.22 KB
/blog/2013/12/23/community-roundup-12 60.11 KB (🟢 -1.34 KB) 144.68 KB
/blog/2013/12/30/community-roundup-13 59.89 KB (🟢 -1.34 KB) 144.46 KB
/blog/2014/01/02/react-chrome-developer-tools 58.15 KB (🟢 -1.34 KB) 142.72 KB
/blog/2014/01/06/community-roundup-14 59.49 KB (🟢 -1.34 KB) 144.05 KB
/blog/2014/02/05/community-roundup-15 60.71 KB (🟢 -1.34 KB) 145.27 KB
/blog/2014/02/15/community-roundup-16 60.42 KB (🟢 -1.34 KB) 144.98 KB
/blog/2014/02/16/react-v0.9-rc1 60.82 KB (🟢 -1.34 KB) 145.39 KB
/blog/2014/02/20/react-v0.9 61.27 KB (🟢 -1.34 KB) 145.83 KB
/blog/2014/02/24/community-roundup-17 60.13 KB (🟢 -1.34 KB) 144.7 KB
/blog/2014/03/14/community-roundup-18 61.1 KB (🟢 -1.34 KB) 145.66 KB
/blog/2014/03/19/react-v0.10-rc1 59.41 KB (🟢 -1.34 KB) 143.97 KB
/blog/2014/03/21/react-v0.10 59.43 KB (🟢 -1.34 KB) 144 KB
/blog/2014/03/28/the-road-to-1.0 59.54 KB (🟢 -1.34 KB) 144.11 KB
/blog/2014/04/04/reactnet 58.18 KB (🟢 -1.34 KB) 142.75 KB
/blog/2014/05/06/flux 58.31 KB (🟢 -1.34 KB) 142.88 KB
/blog/2014/05/29/one-year-of-open-source-react 58.53 KB (🟢 -1.34 KB) 143.1 KB
/blog/2014/06/27/community-roundup-19 60.08 KB (🟢 -1.34 KB) 144.65 KB
/blog/2014/07/13/react-v0.11-rc1 60.46 KB (🟢 -1.34 KB) 145.02 KB
/blog/2014/07/17/react-v0.11 61.71 KB (🟢 -1.34 KB) 146.28 KB
/blog/2014/07/25/react-v0.11.1 58.66 KB (🟢 -1.34 KB) 143.23 KB
/blog/2014/07/28/community-roundup-20 60.22 KB (🟢 -1.34 KB) 144.79 KB
/blog/2014/07/30/flux-actions-and-the-dispatcher 59.85 KB (🟢 -1.34 KB) 144.42 KB
/blog/2014/08/03/community-roundup-21 59.89 KB (🟢 -1.34 KB) 144.45 KB
/blog/2014/09/03/introducing-the-jsx-specification 57.89 KB (🟢 -1.34 KB) 142.46 KB
/blog/2014/09/12/community-round-up-22 60.37 KB (🟢 -1.34 KB) 144.93 KB
/blog/2014/09/16/react-v0.11.2 58.66 KB (🟢 -1.34 KB) 143.23 KB
/blog/2014/09/24/testing-flux-applications 61.84 KB (🟢 -1.34 KB) 146.41 KB
/blog/2014/10/14/introducing-react-elements 60.8 KB (🟢 -1.34 KB) 145.36 KB
/blog/2014/10/16/react-v0.12-rc1 60.76 KB (🟢 -1.34 KB) 145.33 KB
/blog/2014/10/17/community-roundup-23 61.33 KB (🟢 -1.34 KB) 145.9 KB
/blog/2014/10/27/react-js-conf 57.94 KB (🟢 -1.34 KB) 142.5 KB
/blog/2014/10/28/react-v0.12 60.7 KB (🟢 -1.34 KB) 145.27 KB
/blog/2014/11/24/react-js-conf-updates 58.32 KB (🟢 -1.34 KB) 142.89 KB
/blog/2014/11/25/community-roundup-24 61.56 KB (🟢 -1.34 KB) 146.13 KB
/blog/2014/12/18/react-v0.12.2 58.35 KB (🟢 -1.34 KB) 142.92 KB
/blog/2014/12/19/react-js-conf-diversity-scholarship 58.75 KB (🟢 -1.34 KB) 143.31 KB
/blog/2015/01/27/react-v0.13.0-beta-1 59.71 KB (🟢 -1.34 KB) 144.28 KB
/blog/2015/02/18/react-conf-roundup-2015 61.7 KB (🟢 -1.34 KB) 146.26 KB
/blog/2015/02/20/introducing-relay-and-graphql 60.85 KB (🟢 -1.34 KB) 145.42 KB
/blog/2015/02/24/react-v0.13-rc1 59.75 KB (🟢 -1.34 KB) 144.32 KB
/blog/2015/02/24/streamlining-react-elements 62.3 KB (🟢 -1.34 KB) 146.87 KB
/blog/2015/03/03/react-v0.13-rc2 59.09 KB (🟢 -1.34 KB) 143.65 KB
/blog/2015/03/04/community-roundup-25 60.05 KB (🟢 -1.34 KB) 144.61 KB
/blog/2015/03/10/react-v0.13 60.37 KB (🟢 -1.34 KB) 144.93 KB
/blog/2015/03/16/react-v0.13.1 58.19 KB (🟢 -1.34 KB) 142.75 KB
/blog/2015/03/19/building-the-facebook-news-feed-with-relay 60.94 KB (🟢 -1.34 KB) 145.51 KB
/blog/2015/03/26/introducing-react-native 58.08 KB (🟢 -1.34 KB) 142.65 KB
/blog/2015/03/30/community-roundup-26 60.01 KB (🟢 -1.34 KB) 144.58 KB
/blog/2015/04/17/react-native-v0.4 58.93 KB (🟢 -1.34 KB) 143.49 KB
/blog/2015/04/18/react-v0.13.2 58.26 KB (🟢 -1.34 KB) 142.83 KB
/blog/2015/05/01/graphql-introduction 62.75 KB (🟢 -1.34 KB) 147.32 KB
/blog/2015/05/08/react-v0.13.3 58.15 KB (🟢 -1.34 KB) 142.72 KB
/blog/2015/05/22/react-native-release-process 58.31 KB (🟢 -1.34 KB) 142.87 KB
/blog/2015/06/12/deprecating-jstransform-and-react-tools 58.75 KB (🟢 -1.34 KB) 143.32 KB
/blog/2015/07/03/react-v0.14-beta-1 60.26 KB (🟢 -1.34 KB) 144.83 KB
/blog/2015/08/03/new-react-devtools-beta 58.87 KB (🟢 -1.34 KB) 143.43 KB
/blog/2015/08/11/relay-technical-preview 58.93 KB (🟢 -1.34 KB) 143.5 KB
/blog/2015/08/13/reacteurope-roundup 60.52 KB (🟢 -1.34 KB) 145.09 KB
/blog/2015/09/02/new-react-developer-tools 58.28 KB (🟢 -1.34 KB) 142.85 KB
/blog/2015/09/10/react-v0.14-rc1 63.97 KB (🟢 -1.34 KB) 148.54 KB
/blog/2015/09/14/community-roundup-27 60.45 KB (🟢 -1.34 KB) 145.01 KB
/blog/2015/10/01/react-render-and-top-level-api 59.42 KB (🟢 -1.34 KB) 143.98 KB
/blog/2015/10/07/react-v0.14 64.45 KB (🟢 -1.34 KB) 149.02 KB
/blog/2015/10/19/reactiflux-is-moving-to-discord 60.17 KB (🟢 -1.34 KB) 144.74 KB
/blog/2015/10/28/react-v0.14.1 58.18 KB (🟢 -1.34 KB) 142.74 KB
/blog/2015/11/02/react-v0.14.2 58.21 KB (🟢 -1.34 KB) 142.77 KB
/blog/2015/11/18/react-v0.14.3 58.33 KB (🟢 -1.34 KB) 142.9 KB
/blog/2015/12/04/react-js-conf-2016-diversity-scholarship 59.2 KB (🟢 -1.34 KB) 143.77 KB
/blog/2015/12/16/ismounted-antipattern 58.8 KB (🟢 -1.34 KB) 143.37 KB
/blog/2015/12/18/react-components-elements-and-instances 62.72 KB (🟢 -1.34 KB) 147.29 KB
/blog/2015/12/29/react-v0.14.4 58 KB (🟢 -1.34 KB) 142.57 KB
/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A 59.01 KB (🟢 -1.34 KB) 143.58 KB
/blog/2016/01/12/discontinuing-ie8-support 57.83 KB (🟢 -1.34 KB) 142.39 KB
/blog/2016/02/19/new-versioning-scheme 59.2 KB (🟢 -1.34 KB) 143.77 KB
/blog/2016/03/07/react-v15-rc1 61.96 KB (🟢 -1.34 KB) 146.52 KB
/blog/2016/03/16/react-v15-rc2 58.82 KB (🟢 -1.34 KB) 143.39 KB
/blog/2016/03/29/react-v0.14.8 57.96 KB (🟢 -1.34 KB) 142.52 KB
/blog/2016/04/07/react-v15 66.14 KB (🟢 -1.34 KB) 150.71 KB
/blog/2016/04/08/react-v15.0.1 58.71 KB (🟢 -1.34 KB) 143.28 KB
/blog/2016/07/11/introducing-reacts-error-code-system 58.42 KB (🟢 -1.34 KB) 142.99 KB
/blog/2016/07/13/mixins-considered-harmful 66.57 KB (🟢 -1.34 KB) 151.14 KB
/blog/2016/07/22/create-apps-with-no-configuration 61.9 KB (🟢 -1.34 KB) 146.47 KB
/blog/2016/08/05/relay-state-of-the-state 61.94 KB (🟢 -1.34 KB) 146.51 KB
/blog/2016/09/28/our-first-50000-stars 63.39 KB (🟢 -1.34 KB) 147.96 KB
/blog/2016/11/16/react-v15.4.0 61.34 KB (🟢 -1.34 KB) 145.91 KB
/blog/2017/04/07/react-v15.5.0 61.91 KB (🟢 -1.34 KB) 146.47 KB
/blog/2017/05/18/whats-new-in-create-react-app 61.3 KB (🟢 -1.34 KB) 145.87 KB
/blog/2017/06/13/react-v15.6.0 59.93 KB (🟢 -1.34 KB) 144.49 KB
/blog/2017/07/26/error-handling-in-react-16 60.28 KB (🟢 -1.34 KB) 144.84 KB
/blog/2017/09/08/dom-attributes-in-react-16 60.71 KB (🟢 -1.34 KB) 145.27 KB
/blog/2017/09/25/react-v15.6.2 59.04 KB (🟢 -1.34 KB) 143.61 KB
/blog/2017/09/26/react-v16.0 64.17 KB (🟢 -1.34 KB) 148.74 KB
/blog/2017/11/28/react-v16.2.0-fragment-support 62.1 KB (🟢 -1.34 KB) 146.67 KB
/blog/2017/12/07/introducing-the-react-rfc-process 58.63 KB (🟢 -1.34 KB) 143.19 KB
/blog/2017/12/15/improving-the-repository-infrastructure 74.41 KB (🟢 -1.34 KB) 158.98 KB
/blog/2018/03/01/sneak-peek-beyond-react-16 58.58 KB (🟢 -1.34 KB) 143.15 KB
/blog/2018/03/27/update-on-async-rendering 63.82 KB (🟢 -1.34 KB) 148.39 KB
/blog/2018/03/29/react-v-16-3 60.64 KB (🟢 -1.34 KB) 145.21 KB
/blog/2018/05/23/react-v-16-4 60.78 KB (🟢 -1.34 KB) 145.35 KB
/blog/2018/06/07/you-probably-dont-need-derived-state 64.44 KB (🟢 -1.34 KB) 149.01 KB
/blog/2018/08/01/react-v-16-4-2 59.43 KB (🟢 -1.34 KB) 144 KB
/blog/2018/09/10/introducing-the-react-profiler 61.04 KB (🟢 -1.34 KB) 145.61 KB
/blog/2018/10/01/create-react-app-v2 61.52 KB (🟢 -1.34 KB) 146.09 KB
/blog/2018/10/23/react-v-16-6 60.72 KB (🟢 -1.34 KB) 145.28 KB
/blog/2018/11/13/react-conf-recap 58.43 KB (🟢 -1.34 KB) 143 KB
/blog/2018/11/27/react-16-roadmap 64.62 KB (🟢 -1.34 KB) 149.19 KB
/blog/2018/12/19/react-v-16-7 59.55 KB (🟢 -1.34 KB) 144.12 KB
/blog/2019/02/06/react-v16.8.0 61.82 KB (🟢 -1.34 KB) 146.39 KB
/blog/2019/02/23/is-react-translated-yet 61.38 KB (🟢 -1.34 KB) 145.95 KB
/blog/2019/08/08/react-v16.9.0 64.31 KB (🟢 -1.34 KB) 148.88 KB
/blog/2019/08/15/new-react-devtools 58.92 KB (🟢 -1.34 KB) 143.49 KB
/blog/2019/10/22/react-release-channels 60.74 KB (🟢 -1.34 KB) 145.31 KB
/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense 65.44 KB (🟢 -1.34 KB) 150.01 KB
/blog/2020/02/26/react-v16.13.0 61.66 KB (🟢 -1.34 KB) 146.23 KB
/blog/2020/08/10/react-v17-rc 67.94 KB (🟢 -1.34 KB) 152.51 KB
/community 47.44 KB (🟢 -1.34 KB) 132.01 KB
/community/acknowledgements 48.63 KB (🟢 -1.34 KB) 133.2 KB
/community/meet-the-team 49.32 KB (🟢 -1.34 KB) 133.89 KB
/learn 52.39 KB (🟢 -1.34 KB) 136.96 KB
/learn/add-react-to-a-website 52.52 KB (🟢 -1.34 KB) 137.08 KB
/learn/adding-interactivity 54.08 KB (🟢 -1.34 KB) 138.65 KB
/learn/choosing-the-state-structure 59.8 KB (🟢 -1.34 KB) 144.37 KB
/learn/conditional-rendering 52.04 KB (🟢 -1.34 KB) 136.61 KB
/learn/describing-the-ui 51.25 KB (🟢 -1.34 KB) 135.82 KB
/learn/editor-setup 48.72 KB (🟢 -1.34 KB) 133.29 KB
/learn/escape-hatches 46.77 KB (🟢 -1.34 KB) 131.33 KB
/learn/extracting-state-logic-into-a-reducer 57.44 KB (🟢 -1.34 KB) 142.01 KB
/learn/importing-and-exporting-components 50.44 KB (🟢 -1.34 KB) 135 KB
/learn/installation 48.04 KB (🟢 -1.34 KB) 132.61 KB
/learn/javascript-in-jsx-with-curly-braces 50.51 KB (🟢 -1.34 KB) 135.08 KB
/learn/keeping-components-pure 54.64 KB (🟢 -1.34 KB) 139.21 KB
/learn/managing-state 53.36 KB (🟢 -1.34 KB) 137.93 KB
/learn/manipulating-the-dom-with-refs 55.61 KB (🟢 -1.34 KB) 140.18 KB
/learn/passing-data-deeply-with-context 55.17 KB (🟢 -1.34 KB) 139.73 KB
/learn/passing-props-to-a-component 54.21 KB (🟢 -1.34 KB) 138.78 KB
/learn/preserving-and-resetting-state 58.18 KB (🟢 -1.34 KB) 142.75 KB
/learn/queueing-a-series-of-state-updates 52.01 KB (🟢 -1.34 KB) 136.58 KB
/learn/react-developer-tools 48 KB (🟢 -1.34 KB) 132.57 KB
/learn/reacting-to-input-with-state 56.62 KB (🟢 -1.34 KB) 141.18 KB
/learn/referencing-values-with-refs 53.53 KB (🟢 -1.34 KB) 138.09 KB
/learn/render-and-commit 50.51 KB (🟢 -1.34 KB) 135.08 KB
/learn/rendering-lists 54.6 KB (🟢 -1.34 KB) 139.17 KB
/learn/responding-to-events 53.53 KB (🟢 -1.34 KB) 138.1 KB
/learn/scaling-up-with-reducer-and-context 51.58 KB (🟢 -1.34 KB) 136.14 KB
/learn/sharing-state-between-components 52.66 KB (🟢 -1.34 KB) 137.22 KB
/learn/start-a-new-react-project 49.05 KB (🟢 -1.34 KB) 133.62 KB
/learn/state-a-components-memory 57.74 KB (🟢 -1.34 KB) 142.3 KB
/learn/state-as-a-snapshot 51.31 KB (🟢 -1.34 KB) 135.88 KB
/learn/thinking-in-react 53.37 KB (🟢 -1.34 KB) 137.94 KB
/learn/updating-arrays-in-state 55.6 KB (🟢 -1.34 KB) 140.17 KB
/learn/updating-objects-in-state 55.34 KB (🟢 -1.34 KB) 139.91 KB
/learn/writing-markup-with-jsx 50.75 KB (🟢 -1.34 KB) 135.32 KB
/learn/your-first-component 51.35 KB (🟢 -1.34 KB) 135.91 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.

@SukkaW
Copy link
Contributor Author

SukkaW commented May 26, 2022 •
edited

I only realize that after the Next.js Bundle Analysis action commented: this one line of change reduces the bundle size by 1.34 KB!

@harish-sethuraman
Copy link
Collaborator

Yep! Interesting

@gaearon gaearon merged commit e6dfdd3 into reactjs:main May 26, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@harish-sethuraman harish-sethuraman harish-sethuraman approved these changes

@gaearon gaearon Awaiting requested review from gaearon

Assignees
No one assigned
Labels
beta CLA Signed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@SukkaW @harish-sethuraman @gaearon @facebook-github-bot