setup bundle size report

[TkDodo]

setup a bot that reports the bundle-size of a PR, either as a comment or as a github status check. We don't need a max size at the moment - it should just be informational

From what I've quickly googled, there is https://github.com/siddharthkp/bundlesize, but feel free to analyze what would be a good tool

[prateek3255]

I can take this up @TkDodo

[jan-dh]

https://github.com/bundlewatch/bundlewatch this seems pretty handy. I'll look I can make a PR for this.

[TkDodo]

I don't have a preference. bundlewatch says that bundlesize is in maintenance mode, but there's also not much action going on in bundlewatch itself 🤷

I just double checked, and for one project, we tried out bundlewatch, but abandoned it because apparently some things didn't work / were quite complicated. But I wasn't involved in that decision.

We're now using https://github.com/ai/size-limit which we are really happy with, but we're using webpack and react-query is using rollup (not sure if that makes a difference)

[jan-dh]

Alright, tried setting up size-limit but got some errors. They seem Typescript related, not really experienced with TS, so if you have any clue what's going on here?

yarn run v1.7.0
$ rimraf ./lib && cross-env BABEL_ENV=commonjs babel --extensions .ts,.tsx --ignore ./src/**/tests/**/* ./src --out-dir lib
Successfully compiled 56 files with Babel (2556ms).
✨  Done in 3.04s.
yarn run v1.7.0
$ rimraf ./es && babel --extensions .ts,.tsx --ignore ./src/**/tests/**/* ./src --out-dir es
Successfully compiled 56 files with Babel (2293ms).
✨  Done in 2.71s.
yarn run v1.7.0
$ rimraf ./dist && cross-env NODE_ENV=production rollup -c && rollup-plugin-visualizer stats-react.json

src/index.ts → dist/react-query.development.js...
created dist/react-query.development.js in 2.4s

src/index.ts → dist/react-query.production.min.js...
 react-query.production.min.js ⏤  11.6 kB (+11.6 kB)
(!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
created dist/react-query.production.min.js in 2.3s

src/core/index.ts → dist/react-query-core.development.js...
created dist/react-query-core.development.js in 973ms

src/core/index.ts → dist/react-query-core.production.min.js...
      react-query.production.min.js ⏤  0 B (-11.6 kB)
 react-query-core.production.min.js ⏤  10.4 kB (+10.4 kB)
(!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
created dist/react-query-core.production.min.js in 1.9s

src/devtools/index.ts → dist/react-query-devtools.development.js...
created dist/react-query-devtools.development.js in 589ms

src/devtools/index.ts → dist/react-query-devtools.production.min.js...
     react-query-core.production.min.js ⏤  0 B (-10.4 kB)
 react-query-devtools.production.min.js ⏤  13.5 kB (+13.5 kB)
(!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
created dist/react-query-devtools.production.min.js in 1.2s

src/hydration/index.ts → dist/react-query-hydration.development.js...
created dist/react-query-hydration.development.js in 17ms

src/hydration/index.ts → dist/react-query-hydration.production.min.js...
  react-query-devtools.production.min.js ⏤  0 B (-13.5 kB)
 react-query-hydration.production.min.js ⏤  332 B (+332 B)
(!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
created dist/react-query-hydration.production.min.js in 331ms

src/persistQueryClient-experimental/index.ts → dist/persistQueryClient-experimental.development.js...
created dist/persistQueryClient-experimental.development.js in 463ms

src/persistQueryClient-experimental/index.ts → dist/persistQueryClient-experimental.production.min.js...
           react-query-hydration.production.min.js ⏤  0 B (-332 B)
 persistQueryClient-experimental.production.min.js ⏤  851 B (+851 B)
(!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
created dist/persistQueryClient-experimental.production.min.js in 542ms

src/createWebStoragePersistor-experimental/index.ts → dist/createWebStoragePersistor-experimental.development.js...
created dist/createWebStoragePersistor-experimental.development.js in 138ms

src/createWebStoragePersistor-experimental/index.ts → dist/createWebStoragePersistor-experimental.production.min.js...
        persistQueryClient-experimental.production.min.js ⏤  0 B (-851 B)
 createWebStoragePersistor-experimental.production.min.js ⏤  571 B (+571 B)
(!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
created dist/createWebStoragePersistor-experimental.production.min.js in 370ms

src/createAsyncStoragePersistor-experimental/index.ts → dist/createAsyncStoragePersistor-experimental.development.js...
created dist/createAsyncStoragePersistor-experimental.development.js in 136ms

src/createAsyncStoragePersistor-experimental/index.ts → dist/createAsyncStoragePersistor-experimental.production.min.js...
   createWebStoragePersistor-experimental.production.min.js ⏤  0 B (-571 B)
 createAsyncStoragePersistor-experimental.production.min.js ⏤  863 B (+863 B)
(!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
created dist/createAsyncStoragePersistor-experimental.production.min.js in 488ms

src/broadcastQueryClient-experimental/index.ts → dist/broadcastQueryClient-experimental.development.js...
created dist/broadcastQueryClient-experimental.development.js in 264ms

src/broadcastQueryClient-experimental/index.ts → dist/broadcastQueryClient-experimental.production.min.js...
 createAsyncStoragePersistor-experimental.production.min.js ⏤  0 B (-863 B)
        broadcastQueryClient-experimental.production.min.js ⏤  3.76 kB (+3.76 kB)
(!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
created dist/broadcastQueryClient-experimental.production.min.js in 807ms
✨  Done in 14.01s.
yarn run v1.7.0
$ rimraf ./types && tsc --project ./tsconfig.types.json && replace 'import type' 'import' ./types -r --silent && replace 'export type' 'export' ./types -r --silent
src/core/queryObserver.ts:498:11 - error TS2322: Type 'unknown' is not assignable to type 'TError | null'.
  Type 'unknown' is not assignable to type 'TError'.
    'TError' could be instantiated with an arbitrary type which could be unrelated to 'unknown'.

498           error = selectError
              ~~~~~

src/core/queryObserver.ts:499:11 - error TS2322: Type 'unknown' is not assignable to type 'Error | null'.
  Type 'unknown' is not assignable to type 'Error'.

499           this.previousSelectError = selectError
              ~~~~~~~~~~~~~~~~~~~~~~~~

src/core/queryObserver.ts:541:13 - error TS2322: Type 'unknown' is not assignable to type 'TError | null'.
  Type 'unknown' is not assignable to type 'TError'.
    'TError' could be instantiated with an arbitrary type which could be unrelated to 'unknown'.

541             error = selectError
                ~~~~~

src/core/queryObserver.ts:542:13 - error TS2322: Type 'unknown' is not assignable to type 'Error | null'.
  Type 'unknown' is not assignable to type 'Error'.

542             this.previousSelectError = selectError
                ~~~~~~~~~~~~~~~~~~~~~~~~


Found 4 errors.

[TkDodo]

it could be that you are not using the right typescript version? TS 4.4 has a breaking change that errors default to unknown. The yarn.lock file should lock typescript to version "4.1.2".

[jan-dh]

Ah, did an npm installand there was no lock file yet for npm. Switching to yarn now I got it working. Output:

success Saved lockfile.
✨  Done in 98.77s.
 ✝  ~/Sites/react-query   master±  yarn run size
yarn run v1.22.17
$ npm run build && size-limit
npm WARN lifecycle The node binary used for scripts is /var/folders/9x/q89d0jx95cjgtmvlk8bk7d8r0000gq/T/yarn--1635325114703-0.5593366723855282/node but npm is using /usr/local/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> react-query@1.0.0-semantic-release build /Users/jandhollander/Sites/react-query
> yarn build:commonjs && yarn build:es && yarn build:umd && yarn build:types

$ rimraf ./lib && cross-env BABEL_ENV=commonjs babel --extensions .ts,.tsx --ignore ./src/**/tests/**/* ./src --out-dir lib
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Successfully compiled 56 files with Babel (6520ms).
$ rimraf ./es && babel --extensions .ts,.tsx --ignore ./src/**/tests/**/* ./src --out-dir es
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Successfully compiled 56 files with Babel (5912ms).
$ rimraf ./dist && cross-env NODE_ENV=production rollup -c && rollup-plugin-visualizer stats-react.json

src/index.ts → dist/react-query.development.js...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
created dist/react-query.development.js in 6.1s

src/index.ts → dist/react-query.production.min.js...
 broadcastQueryClient-experimental.production.min.js ⏤  0 B (-3.76 kB)
                       react-query.production.min.js ⏤  11.6 kB (+11.6 kB)
created dist/react-query.production.min.js in 2.3s

src/core/index.ts → dist/react-query-core.development.js...
created dist/react-query-core.development.js in 1s

src/core/index.ts → dist/react-query-core.production.min.js...
      react-query.production.min.js ⏤  0 B (-11.6 kB)
 react-query-core.production.min.js ⏤  10.4 kB (+10.4 kB)
created dist/react-query-core.production.min.js in 2.1s

src/devtools/index.ts → dist/react-query-devtools.development.js...
created dist/react-query-devtools.development.js in 655ms

src/devtools/index.ts → dist/react-query-devtools.production.min.js...
     react-query-core.production.min.js ⏤  0 B (-10.4 kB)
 react-query-devtools.production.min.js ⏤  13.1 kB (+13.1 kB)
created dist/react-query-devtools.production.min.js in 1.2s

src/hydration/index.ts → dist/react-query-hydration.development.js...
created dist/react-query-hydration.development.js in 35ms

src/hydration/index.ts → dist/react-query-hydration.production.min.js...
  react-query-devtools.production.min.js ⏤  0 B (-13.1 kB)
 react-query-hydration.production.min.js ⏤  318 B (+318 B)
created dist/react-query-hydration.production.min.js in 290ms

src/persistQueryClient-experimental/index.ts → dist/persistQueryClient-experimental.development.js...
created dist/persistQueryClient-experimental.development.js in 327ms

src/persistQueryClient-experimental/index.ts → dist/persistQueryClient-experimental.production.min.js...
           react-query-hydration.production.min.js ⏤  0 B (-318 B)
 persistQueryClient-experimental.production.min.js ⏤  837 B (+837 B)
created dist/persistQueryClient-experimental.production.min.js in 457ms

src/createWebStoragePersistor-experimental/index.ts → dist/createWebStoragePersistor-experimental.development.js...
created dist/createWebStoragePersistor-experimental.development.js in 116ms

src/createWebStoragePersistor-experimental/index.ts → dist/createWebStoragePersistor-experimental.production.min.js...
        persistQueryClient-experimental.production.min.js ⏤  0 B (-837 B)
 createWebStoragePersistor-experimental.production.min.js ⏤  560 B (+560 B)
created dist/createWebStoragePersistor-experimental.production.min.js in 356ms

src/createAsyncStoragePersistor-experimental/index.ts → dist/createAsyncStoragePersistor-experimental.development.js...
created dist/createAsyncStoragePersistor-experimental.development.js in 125ms

src/createAsyncStoragePersistor-experimental/index.ts → dist/createAsyncStoragePersistor-experimental.production.min.js...
   createWebStoragePersistor-experimental.production.min.js ⏤  0 B (-560 B)
 createAsyncStoragePersistor-experimental.production.min.js ⏤  850 B (+850 B)
created dist/createAsyncStoragePersistor-experimental.production.min.js in 404ms

src/broadcastQueryClient-experimental/index.ts → dist/broadcastQueryClient-experimental.development.js...
created dist/broadcastQueryClient-experimental.development.js in 289ms

src/broadcastQueryClient-experimental/index.ts → dist/broadcastQueryClient-experimental.production.min.js...
 createAsyncStoragePersistor-experimental.production.min.js ⏤  0 B (-850 B)
        broadcastQueryClient-experimental.production.min.js ⏤  3.63 kB (+3.63 kB)
created dist/broadcastQueryClient-experimental.production.min.js in 808ms
$ rimraf ./types && tsc --project ./tsconfig.types.json && replace 'import type' 'import' ./types -r --silent && replace 'export type' 'export' ./types -r --silent

  Size: 110.68 kB gzipped

✨  Done in 37.83s.

[TkDodo]

Size: 110.68 kB gzipped

weird - our bundle size is about 12.4kb minzipped 🤔

[jan-dh]

Seems the deploy is failing since size-limit requires a minimum dependency of node 12 and the deploy github test-and-publish runs on node 10 first

 error @size-limit/file@6.0.3: The engine "node" is incompatible with this module. Expected version "^12.0.0 || ^14.0.0 || >=16.0.0". Got "10.24.1"

[tannerlinsley]

🎉 This issue has been resolved in version 3.29.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀