Remove react-query-devtools from production build #1121

kevinxh · 2023-04-10T18:20:56Z

Description

Goal: remove react-query-devtools from production build to reduce bundle size.

Changes:

removes react-query-devtools from commerce-sdk-react
install react-query-devtools in retail react app
Lower bundle size test thresholds.

Bundle analysis before & after

BEFORE

AFTER

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

How to Test-Drive This PR

run npm start in ./packages/template-retail-react-app and open localhost:3000 and notice the devtool icon on left bottom corner
run NODE_ENV=production npm start, verify the icon is gone
run npm run analyze-build and verify the react-query-devtools is not in the build

wjhsf · 2023-04-10T18:59:24Z

packages/template-retail-react-app/package.json

    },
    {
      "path": "build/vendor.js",
-      "maxSize": "355 kB"
+      "maxSize": "285 kB"


wjhsf · 2023-04-10T19:01:56Z

packages/template-retail-react-app/app/components/_app-config/index.jsx

@@ -57,6 +58,7 @@ const AppConfig = ({children, locals = {}}) => {
            <MultiSiteProvider site={locals.site} locale={locals.locale} buildUrl={locals.buildUrl}>
                <ChakraProvider theme={theme}>{children}</ChakraProvider>
            </MultiSiteProvider>
+            <ReactQueryDevtools />


From the docs:

By default, React Query Devtools are only included in bundles when process.env.NODE_ENV === 'development', so you don't need to worry about excluding them during a production build.

👌

kevinxh · 2023-04-10T19:05:12Z

hmmmm, why is bundlesize test give different results on CI...

(CI)

(local)

vmarta · 2023-04-10T20:22:53Z

hmmmm, why is bundlesize test give different results on CI...

That's strange 🤔 Is the generated project really different than what's in the template-retail-react-app folder?

alexvuong · 2023-04-10T20:44:35Z

I think the difference is that in generated-project, the pwa-kit-react-sdk/pwa-kit-*/commerce-sdk-react is included inside vendor.js while in the template, it is included inside main.js. If you run analyze-build on generated-project, and the template, you will see it. I ran both scenarios on v2.7.0, and v2, and I found pwa-kit-react-sdk caused the difference in bundle sizes
V2

generated project

kevinxh · 2023-04-10T22:10:07Z

Thanks @alexvuong . I made a change to CI to not run bundlesize in generated_projects.

alexvuong · 2023-04-10T22:33:04Z

@kevinxh I am wondering why there is a difference between generated project and the template like that. Is it because of template is inside a monorepo? 🤔 .

kevinxh · 2023-04-10T22:36:31Z

@alexvuong yea, i think so. I don't think it's super important to choose to run bundle size in either monorepo or generated project. It's a reference for us to not go over the limit, the absolute value isn't super useful. The reason why I chose to run bundlesize in the monorepo is to get the same result when developing locally when you run npm run test:max-file-size.

.github/workflows/test.yml

bendvc · 2023-04-11T15:01:31Z

@alexvuong yea, i think so. I don't think it's super important to choose to run bundle size in either monorepo or generated project. It's a reference for us to not go over the limit, the absolute value isn't super useful. The reason why I chose to run bundlesize in the monorepo is to get the same result when developing locally when you run npm run test:max-file-size.

@kevinxh I think it's important that both analyze-build return the same results in the mono repo and the generated project. This would overall jsut make the landscape less confusing, and I feel that the generated project IS the standard where we ultimately want to check bundle size.

You might want to play around with the following part of the webpack configuration:

                    vendor: {
                        // Anything imported from node_modules lands in
                        // vendor.js, if we're chunking.
                        test: /node_modules/,
                        name: 'vendor',
                        chunks: 'all'
                    }

You'll see that this rule isn't catching the imports when run in the mono-repo, maybe there is a quick fit to check for /pwa-kit/ folder so those can go into the vendor as well.

kevinxh · 2023-04-12T17:06:45Z

@alexvuong yea, i think so. I don't think it's super important to choose to run bundle size in either monorepo or generated project. It's a reference for us to not go over the limit, the absolute value isn't super useful. The reason why I chose to run bundlesize in the monorepo is to get the same result when developing locally when you run npm run test:max-file-size.

@kevinxh I think it's important that both analyze-build return the same results in the mono repo and the generated project. This would overall jsut make the landscape less confusing, and I feel that the generated project IS the standard where we ultimately want to check bundle size.

You might want to play around with the following part of the webpack configuration:
                    vendor: {
                        // Anything imported from node_modules lands in
                        // vendor.js, if we're chunking.
                        test: /node_modules/,
                        name: 'vendor',
                        chunks: 'all'
                    }
You'll see that this rule isn't catching the imports when run in the mono-repo, maybe there is a quick fit to check for /pwa-kit/ folder so those can go into the vendor as well.

Updated the vendor.js chunking rule! Thanks for the suggestion!

* v3: [Spike]Replace watch with nodemon (#1146) Fix Page Designer ImageWithText Link component (#1092) (#1148) Upgrade deprecated dependencies (#1124) Restart login flow if refresh_token is invalid (#1135) Move some util to site-utils to avoid circular imports (#1133) Restore old file name. (#1140) Update eslint configuration (#1129) CI: clarify the environment variables (#1127) Remove react-query-devtools from production build (#1121) Update lerna.json (#1118) Parallelize lighthouse ci (#1126) Increase test timeouts only on CI env (#1123) Remove unused `request` deprecated dependency. (#1125) Upgrade msw to latest (#1100) Add mergeBasket hook (#1114) [V3][Hooks Integration 🪝] Manually update cache for ShopperCustomer (#1113) dont use callback on mutateAsync (#1119) 2-spaces not 4-spaces (#1117) # Conflicts: # packages/internal-lib-build/package-lock.json # packages/pwa-kit-create-app/package-lock.json # packages/pwa-kit-dev/package-lock.json # packages/pwa-kit-dev/package.json # packages/pwa-kit-dev/src/configs/webpack/config.js # packages/pwa-kit-dev/src/ssr/server/build-dev-server.js # packages/pwa-kit-react-sdk/package-lock.json # packages/pwa-kit-runtime/package-lock.json # packages/template-express-minimal/package-lock.json # packages/template-mrt-reference-app/package-lock.json # packages/template-retail-react-app/package-lock.json # packages/template-typescript-minimal/package-lock.json # packages/test-commerce-sdk-react/package-lock.json

…-rehaul * feature/template-extensibility: [Spike]Replace watch with nodemon (#1146) Fix Page Designer ImageWithText Link component (#1092) (#1148) Upgrade deprecated dependencies (#1124) Restart login flow if refresh_token is invalid (#1135) Move some util to site-utils to avoid circular imports (#1133) Restore old file name. (#1140) Update eslint configuration (#1129) CI: clarify the environment variables (#1127) Remove react-query-devtools from production build (#1121) Update lerna.json (#1118) Parallelize lighthouse ci (#1126) Increase test timeouts only on CI env (#1123) Remove unused `request` deprecated dependency. (#1125) Upgrade msw to latest (#1100) Add mergeBasket hook (#1114) [V3][Hooks Integration 🪝] Manually update cache for ShopperCustomer (#1113) dont use callback on mutateAsync (#1119) 2-spaces not 4-spaces (#1117) # Conflicts: # packages/internal-lib-build/package-lock.json # packages/pwa-kit-dev/package-lock.json # packages/pwa-kit-react-sdk/package-lock.json # packages/pwa-kit-runtime/package-lock.json # packages/pwa-kit-runtime/package.json

remove react-query-devtools from hook library

88ea19c

kevinxh changed the title ~~remove react-query-devtools from hook library~~ Remove react-query-devtools from production build Apr 10, 2023

kevinxh added 3 commits April 10, 2023 11:39

add devtools to template

e79d674

lower bundle size

875d3d0

update lock file

79adbe2

kevinxh marked this pull request as ready for review April 10, 2023 18:54

kevinxh requested a review from a team as a code owner April 10, 2023 18:54

alexvuong previously approved these changes Apr 10, 2023

View reviewed changes

wjhsf previously approved these changes Apr 10, 2023

View reviewed changes

separate bundlesize CI test

5b251ac

kevinxh dismissed stale reviews from wjhsf and alexvuong via 5b251ac April 10, 2023 21:59

update bundle size thresholds

cecd0b1

update bundlesize configs

84f3de6

kevinxh requested review from alexvuong and wjhsf April 10, 2023 22:39

alexvuong reviewed Apr 10, 2023

View reviewed changes

.github/workflows/test.yml Show resolved Hide resolved

kevinxh added 3 commits April 12, 2023 10:02

chunk monorepo packages in vendor.js

beb013a

update bundle size test

c0f3b9a

merge v3

b3bcef0

fix lock file

4b8e4c5

bendvc previously approved these changes Apr 12, 2023

View reviewed changes

kevinxh requested a review from alexvuong April 12, 2023 17:39

kevinxh enabled auto-merge (squash) April 12, 2023 17:40

Merge branch 'v3' into remove-react-query-devtools

45a5e00

alexvuong previously approved these changes Apr 12, 2023

View reviewed changes

Merge branch 'v3' into remove-react-query-devtools

2116e67

kevinxh dismissed stale reviews from alexvuong and bendvc via 2116e67 April 12, 2023 17:55

Merge branch 'v3' into remove-react-query-devtools

6053abf

alexvuong approved these changes Apr 12, 2023

View reviewed changes

bendvc approved these changes Apr 12, 2023

View reviewed changes

kevinxh merged commit a4700b2 into v3 Apr 12, 2023

bfeister approved these changes Apr 12, 2023

View reviewed changes

kevinxh deleted the remove-react-query-devtools branch April 12, 2023 18:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove react-query-devtools from production build #1121

Remove react-query-devtools from production build #1121

kevinxh commented Apr 10, 2023 •

edited

Loading

wjhsf Apr 10, 2023

wjhsf Apr 10, 2023

kevinxh commented Apr 10, 2023

vmarta commented Apr 10, 2023

alexvuong commented Apr 10, 2023 •

edited

Loading

kevinxh commented Apr 10, 2023 •

edited

Loading

alexvuong commented Apr 10, 2023

kevinxh commented Apr 10, 2023 •

edited

Loading

bendvc commented Apr 11, 2023

kevinxh commented Apr 12, 2023

Remove react-query-devtools from production build #1121

Remove react-query-devtools from production build #1121

Conversation

kevinxh commented Apr 10, 2023 • edited Loading

Description

Bundle analysis before & after

Types of Changes

How to Test-Drive This PR

wjhsf Apr 10, 2023

Choose a reason for hiding this comment

wjhsf Apr 10, 2023

Choose a reason for hiding this comment

kevinxh commented Apr 10, 2023

vmarta commented Apr 10, 2023

alexvuong commented Apr 10, 2023 • edited Loading

kevinxh commented Apr 10, 2023 • edited Loading

alexvuong commented Apr 10, 2023

kevinxh commented Apr 10, 2023 • edited Loading

bendvc commented Apr 11, 2023

kevinxh commented Apr 12, 2023

kevinxh commented Apr 10, 2023 •

edited

Loading

alexvuong commented Apr 10, 2023 •

edited

Loading

kevinxh commented Apr 10, 2023 •

edited

Loading

kevinxh commented Apr 10, 2023 •

edited

Loading