diff --git a/.github/workflows/bundlesize.yml b/.github/workflows/bundlesize.yml new file mode 100644 index 0000000000..79a6fedb15 --- /dev/null +++ b/.github/workflows/bundlesize.yml @@ -0,0 +1,69 @@ +name: "Generate bundle-size for react charting" +on: + schedule: + - cron: "30 3 * * *" + # "30 3 * * *" --> Every day at 3:30 AM UTC --> Every day at 9:00 AM IST + workflow_dispatch: + inputs: + repo: + description: "Repo to run monosize on" + required: true + default: "microsoft/fluentui" + branch: + description: "Branch to run monosize on" + required: true + default: "master" +jobs: + run-monosize: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + with: + repository: ${{github.event.inputs.repo || 'microsoft/fluentui'}} + ref: ${{github.event.inputs.branch || 'master'}} + path: repo + + + - uses: actions/setup-node@v3 + with: + node-version: 18 + cache: yarn + cache-dependency-path: ./repo/yarn.lock + + - name: "Install dependencies and build upto react-charting" + run: | + cd repo + yarn && yarn buildto @fluentui/react-charting + + - name: "Run monosize on react-charting" + run: | + cd repo/packages/react-charting + yarn monosize measure + mv -f ./dist/bundle-size/monosize.json ./../../../ + cd ./../../../ + rm -rf ./repo + + - uses: actions/checkout@v4 + with: + repository: 'microsoft/fluentui-charting-contrib' + ref: 'test-coverage-artifacts' + path: contrib-repo + + - name: Move new bundle-size to folder and clear old folder + run: | + cd ./contrib-repo + if [ -d bundle-size ]; then + rm -rf ./bundle-size + fi + mkdir bundle-size + cd .. + mv -f ./monosize.json ./contrib-repo/bundle-size/ + cd contrib-repo/bundle-size + ls -a + + - name: Push bundle-size to branch + uses: stefanzweifel/git-auto-commit-action@v5 + with: + repository: contrib-repo + branch: test-coverage-artifacts + commit_message: Scheduled bundle-size changes push \ No newline at end of file diff --git a/.github/workflows/testCoverage.yml b/.github/workflows/testCoverage.yml index cc3f3a4646..79d31b7703 100644 --- a/.github/workflows/testCoverage.yml +++ b/.github/workflows/testCoverage.yml @@ -219,13 +219,17 @@ jobs: - name: Move coverage JSONs to root run: | mv -f ./repo/.github ./ + mv -f ./repo/bundle-size ./ cd repo rm -rf ./* cd .. mv -f ./.github ./repo/ + mv -f ./bundle-size ./repo/ mv -f ./coverage/* ./repo/ cd repo ls + continue-on-error: true + - uses: stefanzweifel/git-auto-commit-action@v5 with: repository: repo diff --git a/apps/docsite/sidebars.ts b/apps/docsite/sidebars.ts index 89105771b0..d93d90bafd 100644 --- a/apps/docsite/sidebars.ts +++ b/apps/docsite/sidebars.ts @@ -52,6 +52,7 @@ const sidebars: SidebarsConfig = { ] }, 'Testing Unpublished Library Version', + 'BundleSize' ], }; diff --git a/apps/docsite/src/components/BundleSizeTable.tsx b/apps/docsite/src/components/BundleSizeTable.tsx new file mode 100644 index 0000000000..ccc790db50 --- /dev/null +++ b/apps/docsite/src/components/BundleSizeTable.tsx @@ -0,0 +1,62 @@ +import React, { useEffect, useState } from "react"; +type MonosizeJSON = { + name: string; + path: string; + minifiedSize: number; + gzippedSize: number; +}; +const BundleSizeTable = () => { + const [bundleSizeData, setBundleSizeData] = useState< + MonosizeJSON[] | undefined + >(undefined); + const [errorState, setErrorState] = useState(); + useEffect(() => { + const fetchData = async () => { + try { + const response = await fetch( + "https://raw.githubusercontent.com/microsoft/fluentui-charting-contrib/test-coverage-artifacts/bundle-size/monosize.json", + { mode: "cors" } + ) + if (!response) { + throw new Error("Invalid response"); + } + const data = await response.json(); + setBundleSizeData(data); + } catch (error) { + setErrorState(error); + } + }; + fetchData(); + }, []); + if (errorState) { + return

Error: {errorState.message}

; + } + return ( + <> + {bundleSizeData ? ( + + + + + + + + + + {bundleSizeData.map((item, index) => ( + + + + + + ))} + +
NameMIN sizeGZIP size
{item.name}{(item.minifiedSize / 1024).toFixed(2)} KiB{(item.gzippedSize / 1024).toFixed(2)} KiB
+ ) : ( +

Loading...

+ )} + + ); +}; + +export default BundleSizeTable; diff --git a/docs/BundleSize.md b/docs/BundleSize.md new file mode 100644 index 0000000000..0f3e94c8a9 --- /dev/null +++ b/docs/BundleSize.md @@ -0,0 +1,11 @@ +# Bundle Size + +This table measures the maximum unpacked size of each chart control. This is measured by the [monosize tool](https://github.com/microsoft/monosize). + +Each chart is [tree shakable](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking). +The actual size overhead for your application consuming the chart will depend on only the piece of functionality that you are importing. +To further improve the dependency size, consider turning on the mangle and code chunking options while bundling your package. + +import BundleSizeComponent from "../apps/docsite/src/components/BundleSizeTable.tsx" + + \ No newline at end of file