Skip to content

Commit 19d68d5

Browse files
ntuckerntucker
committed
internal: Add bundle size tracker on PRs
1 parent 3334071 commit 19d68d5

File tree

11 files changed

+270
-0
lines changed

11 files changed

+270
-0
lines changed

‎.circleci/config.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ jobs:
3030
- run:
3131
name: Add examples/* to yarn workspace
3232
command: |
33+
npm pkg delete workspaces[5]
3334
npm pkg delete workspaces[4]
3435
npm pkg delete workspaces[3]
3536
npm pkg delete workspaces[2]

‎.github/workflows/bundle_size.yml‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
name: Bundle Size
2+
3+
on: [pull_request]
4+
5+
jobs:
6+
build:
7+
8+
runs-on: ubuntu-latest
9+
10+
steps:
11+
- uses: actions/checkout@v4
12+
with:
13+
fetch-depth: 1
14+
- uses: actions/setup-node@v4
15+
with:
16+
node-version: '22'
17+
cache: 'yarn'
18+
- name: Install packages
19+
env:
20+
YARN_ENABLE_IMMUTABLE_INSTALLS: true
21+
run: |
22+
# npm pkg delete workspaces[5]
23+
# npm pkg delete workspaces[4]
24+
# npm pkg delete workspaces[3]
25+
# npm pkg delete workspaces[1]
26+
corepack enable
27+
yarn install
28+
- name: Build packages
29+
run: |
30+
yarn workspaces foreach -Wptiv --no-private run build:lib
31+
- name: compressed-size-action
32+
uses: preactjs/compressed-size-action@v2
33+
continue-on-error: true
34+
with:
35+
repo-token: "${{ secrets.GITHUB_TOKEN }}"
36+
build-script: "build:sizecompare"
37+
pattern: "examples/test-bundlesize/dist/**/*.{js,json}"
38+
exclude: "{examples/test-bundlesize/dist/manifest.json,**/*.LICENSE.txt,**/*.map,**/node_modules/**}"
39+
minimum-change-threshold: 8

‎examples/test-bundlesize/.babelrc.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
presets: [['@anansi', { polyfillMethod: false }], '@linaria'],
3+
};

‎examples/test-bundlesize/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
dist-server

‎examples/test-bundlesize/LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2023 Nathaniel Tucker <[email protected]>
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎examples/test-bundlesize/package.json‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"name": "test-bundlesize",
3+
"version": "0.1.0",
4+
"packageManager": "[email protected]",
5+
"description": "Testing Bundled Size",
6+
"scripts": {
7+
"lint": "eslint src --ext .ts,.tsx",
8+
"format": "npm run lint --fix",
9+
"test:type": "tsc",
10+
"start": "anansi serve --dev ./src/index.tsx",
11+
"start:server": "anansi serve ./dist-server/App.js -a",
12+
"build": "webpack --mode=production",
13+
"build:server": "webpack --mode=production --target=node --env entrypath=index.server.tsx",
14+
"build:analyze": "BABEL_DISABLE_CACHE=1 BROWSERSLIST_ENV='modern' webpack --mode=production --env analyze",
15+
"build:sizecompare": "BABEL_DISABLE_CACHE=1 BROWSERSLIST_ENV='modern' webpack --mode=production --env nohash",
16+
"build:profile": "webpack --mode=production --env profile",
17+
"test:pkg": "webpack --env check=nobuild",
18+
"postinstall": "rm -rf node_modules/.cache"
19+
},
20+
"engines": {
21+
"node": ">=18.0"
22+
},
23+
"browserslist": "extends @anansi/browserslist-config",
24+
"keywords": [
25+
"anansi"
26+
],
27+
"devDependencies": {
28+
"@anansi/babel-preset": "6.2.1",
29+
"@anansi/browserslist-config": "^1.4.3",
30+
"@anansi/webpack-config": "^20.0.0",
31+
"@babel/core": "^7.22.15",
32+
"@types/react": "*",
33+
"@types/react-dom": "*",
34+
"react-refresh": "*",
35+
"typescript": "5.7.3",
36+
"webpack": "*",
37+
"webpack-cli": "*"
38+
},
39+
"dependencies": {
40+
"@babel/runtime-corejs3": "^7.26.7",
41+
"@data-client/img": "^0.14.0",
42+
"@data-client/react": "^0.14.0",
43+
"@data-client/rest": "^0.14.0",
44+
"core-js": "^3.40.0",
45+
"react": "^19.0.0",
46+
"react-dom": "^19.0.0"
47+
},
48+
"main": "src/index.ts",
49+
"types": "src/index.ts",
50+
"private": true,
51+
"license": "MIT"
52+
}

‎examples/test-bundlesize/src/index.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { AsyncBoundary, DataProvider, useSuspense } from '@data-client/react';
2+
import { RestEndpoint } from '@data-client/rest';
3+
import React from 'react';
4+
import { createRoot } from 'react-dom/client';
5+
6+
// docs: https://docs.cloud.coinbase.com/exchange/reference/exchangerestapi_getproductcandles
7+
export const getCandles = new RestEndpoint({
8+
urlPrefix: 'https://api.exchange.coinbase.com',
9+
path: '/products/:product_id/candles',
10+
searchParams: {} as {
11+
granularity?: 60 | 300 | 900 | 3600 | 21600 | 86400;
12+
start?: string | number;
13+
end?: string | number;
14+
},
15+
process(value: CandleTuple[]) {
16+
return value.map(candle => ({
17+
timestamp: candle[0],
18+
price_open: candle[3],
19+
}));
20+
},
21+
pollFrequency: 60 * 1000,
22+
});
23+
24+
type CandleTuple = [
25+
timestamp: number,
26+
price_low: number,
27+
price_high: number,
28+
price_open: number,
29+
price_close: number,
30+
];
31+
32+
export const Doit = () => {
33+
const a = useSuspense(getCandles, { product_id: 'BTC-USD' });
34+
return <>{a} hi</>;
35+
};
36+
export const second = React.memo(Doit);
37+
38+
export default function Entry() {
39+
return (
40+
<DataProvider>
41+
<AsyncBoundary>
42+
<Doit />
43+
</AsyncBoundary>
44+
</DataProvider>
45+
);
46+
}
47+
export const renderedElement = <Entry />;
48+
49+
createRoot(document.getElementById('root') || document.body).render(
50+
renderedElement,
51+
);

‎examples/test-bundlesize/tsconfig.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"compilerOptions": {
3+
"outDir": "./dist",
4+
"baseUrl": "./src",
5+
"target": "esnext",
6+
"module": "esnext",
7+
"lib": [
8+
"dom",
9+
"esnext"
10+
],
11+
"jsx": "react-jsx",
12+
"declaration": true,
13+
"strict": true,
14+
"moduleResolution": "bundler",
15+
"allowSyntheticDefaultImports": true,
16+
"esModuleInterop": true,
17+
"experimentalDecorators": true,
18+
"emitDecoratorMetadata": true,
19+
"skipLibCheck": true,
20+
"types": [
21+
"@anansi/webpack-config/types"
22+
],
23+
"noEmit": true
24+
},
25+
"include": [
26+
"src"
27+
],
28+
"exclude": [
29+
"node_modules",
30+
"dist"
31+
]
32+
}

‎examples/test-bundlesize/webpack.config.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
const { makeConfig } = require('@anansi/webpack-config');
2+
3+
const options = {
4+
basePath: 'src',
5+
buildDir: 'dist/',
6+
serverDir: 'dist-server/',
7+
globalStyleDir: 'style',
8+
sassOptions: false,
9+
};
10+
11+
const generateConfig = makeConfig(options);
12+
13+
module.exports = (env, argv) => {
14+
const config = generateConfig(env, argv);
15+
if (!config.experiments) config.experiments = {};
16+
config.experiments.backCompat = false;
17+
config.optimization.splitChunks = {
18+
chunks: 'async',
19+
maxInitialRequests: 3000,
20+
maxAsyncRequests: 3000,
21+
minSize: 1,
22+
cacheGroups: {
23+
react: {
24+
test: /[\\/]node_modules[\\/](react|react-dom|scheduler|object-assign|loose-envify)[\\/]/,
25+
name: 'react',
26+
chunks: 'all',
27+
},
28+
polyfill: {
29+
test: /[\\/]node_modules[\\/](core-js|core-js-pure|@babel\/runtime|@babel\/runtime-corejs3|regenerator-runtime|ric-shim|babel-runtime)[\\/].*/,
30+
name: 'polyfill',
31+
chunks: 'all',
32+
},
33+
rdc: {
34+
test: /packages/,
35+
name: 'rdc',
36+
chunks: 'all',
37+
priority: 10000,
38+
},
39+
},
40+
};
41+
return config;
42+
};
43+
44+
module.exports.options = options;

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"workspaces": [
44
"packages/*",
55
"examples/benchmark",
6+
"examples/test-bundlesize",
67
"examples/normalizr-*",
78
"examples/coin-app",
89
"website",
@@ -23,6 +24,7 @@
2324
"ci:build:legacy-types": "yarn workspaces foreach -WptivR -j 10 --from @data-client/react --from @data-client/rest --from @data-client/graphql run build:legacy-types",
2425
"ci:build-test-lib": "yarn workspace @data-client/test run build:lib && yarn workspace @data-client/test run build:bundle",
2526
"ci:build:esmodule": "yarn workspaces foreach -WptivR --from @data-client/react --from @data-client/rest --from @data-client/graphql run build:lib && yarn workspace @data-client/normalizr run build:js:node && yarn workspace @data-client/endpoint run build:js:node",
27+
"ci:build:bundlesize": "yarn workspace test-bundlesize run build:sizecompare",
2628
"build:copy:ambient": "mkdirp ./packages/endpoint/lib && copyfiles --flat ./packages/endpoint/src/schema.d.ts ./packages/endpoint/lib/ && copyfiles --flat ./packages/endpoint/src/endpoint.d.ts ./packages/endpoint/lib/ && mkdirp ./packages/rest/lib && copyfiles --flat ./packages/rest/src/RestEndpoint.d.ts ./packages/rest/lib && copyfiles --flat ./packages/rest/src/next/RestEndpoint.d.ts ./packages/rest/lib/next && mkdirp ./packages/react/lib && copyfiles --flat ./packages/react/src/server/redux/redux.d.ts ./packages/react/lib/server/redux",
2729
"copy:websitetypes": "./scripts/copywebsitetypes.sh",
2830
"test": "NODE_ENV=test NODE_OPTIONS=--experimental-vm-modules run jest",

0 commit comments

Comments
 (0)