search

helix-bridge / helix-ui

Helix Bridge UI
https://helixbridge.app
3 stars 3 forks source link

Bundle optimization #227

Closed sxlwar closed 2 years ago

sxlwar commented 2 years ago

Topic

Code

Description

helix

 ~/projects/itering/helix-ui/ [bundle_optimize] yarn build:helix
yarn run v1.22.17
$ node_modules/.bin/lerna run --scope helix --stream build
lerna notice cli v4.0.0
lerna notice filter including "helix"
lerna info filter [ 'helix' ]
lerna info Executing command in 1 package: "yarn run build"
helix: $ next build
helix: info  - Loaded env from /Users/shaoxuelei/projects/itering/helix-ui/packages/helix/.env.production
helix: warn  - You have enabled experimental feature(s).
helix: warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.
helix: info  - Checking validity of types...
helix: warn  - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
helix: info  - Creating an optimized production build...
helix: info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
helix: info  - Using external babel configuration from /Users/shaoxuelei/projects/itering/helix-ui/packages/helix/.babelrc
helix: warn - Tailwind is not purging unused styles because no template paths have been provided.
helix: warn - If you have manually configured PurgeCSS outside of Tailwind or are deliberately not removing unused styles, set `purge: false` in your Tailwind config file to silence this warning.
helix: warn - https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
helix: info  - Compiled successfully
helix: info  - Collecting page data...
helix: ⛓️ Chains environment: formal; 🖥️ Runtime environment: production
helix: ⛓️ Chains environment: formal; 🖥️ Runtime environment: production
helix: ⛓️ Chains environment: formal; 🖥️ Runtime environment: production
helix: ⛓️ Chains environment: formal; 🖥️ Runtime environment: production
helix: ⛓️ Chains environment: formal; 🖥️ Runtime environment: production
helix: ⛓️ Chains environment: formal; 🖥️ Runtime environment: production
helix: ⛓️ Chains environment: formal; 🖥️ Runtime environment: production
helix: info  - Generating static pages (0/6)
helix: react-i18next:: You will need to pass in an i18next instance by using initReactI18next
helix: react-i18next:: You will need to pass in an i18next instance by using initReactI18next
helix: react-i18next:: You will need to pass in an i18next instance by using initReactI18next
helix: react-i18next:: You will need to pass in an i18next instance by using initReactI18next
helix: react-i18next:: You will need to pass in an i18next instance by using initReactI18next
helix: react-i18next:: You will need to pass in an i18next instance by using initReactI18next
helix: info  - Generating static pages (1/6)
helix: info  - Generating static pages (2/6)
helix: info  - Generating static pages (4/6)
helix: info  - Generating static pages (6/6)
helix: info  - Finalizing page optimization...
helix: Page                                       Size     First Load JS
helix: ┌ λ /                                      314 kB         1.93 MB
helix: ├   └ css/e58231e4197f4ee0.css             2.36 kB
helix: ├   /_app                                  0 B            1.61 MB
helix: ├ ○ /404                                   284 B          1.61 MB
helix: ├ ○ /500                                   289 B          1.61 MB
helix: ├ λ /api/hello                             0 B            1.61 MB
helix: ├ λ /transaction                           95.8 kB        1.71 MB
helix: ├   └ css/a96f1ff9be9b7e99.css             11.3 kB
helix: ├ λ /transaction/cbridge/[id]              687 B          1.63 MB
helix: ├ λ /transaction/s2dvm/[id]                729 B          1.63 MB
helix: ├ λ /transaction/s2parachain/[id]          693 B          1.63 MB
helix: ├ λ /transaction/s2s/[id]                  720 B          1.63 MB
helix: ├ λ /transaction/s2sv2/[id]                702 B          1.63 MB
helix: └ λ /transaction/xcm/[id]                  600 B          1.63 MB
helix: + First Load JS shared by all              1.61 MB
helix:   ├ chunks/framework-9de8fade601d6062.js   45 kB
helix:   ├ chunks/main-fedbb77d25194085.js        27.1 kB
helix:   ├ chunks/pages/_app-89b514a611337eba.js  1.53 MB
helix:   ├ chunks/webpack-a110ee52e8ef03d6.js     1.86 kB
helix:   └ css/92f46a03ac51c52a.css               507 kB
helix: λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
helix: ○  (Static)  automatically rendered as static HTML (uses no initial props)
lerna success run Ran npm script 'build' in 1 package in 188.3s:
lerna success - helix
✨  Done in 188.97s.

apps

 ~/projects/itering/helix-ui/ [bundle_optimize] yarn build:apps
yarn run v1.22.17
$ node_modules/.bin/lerna run --scope apps --stream build
lerna notice cli v4.0.0
lerna notice filter including "apps"
lerna info filter [ 'apps' ]
lerna info Executing command in 1 package: "yarn run build"
apps: $ next build
apps: info  - Loaded env from /Users/shaoxuelei/projects/itering/helix-ui/packages/apps/.env.production
apps: warn  - You have enabled experimental feature(s).
apps: warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.
apps: info  - Checking validity of types...
apps: warn  - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
apps: info  - Creating an optimized production build...
apps: info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
apps: info  - Using external babel configuration from /Users/shaoxuelei/projects/itering/helix-ui/packages/apps/.babelrc
apps: warn - Tailwind is not purging unused styles because no template paths have been provided.
apps: warn - If you have manually configured PurgeCSS outside of Tailwind or are deliberately not removing unused styles, set `purge: false` in your Tailwind config file to silence this warning.
apps: warn - https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
apps: [BABEL] Note: The code generator has deoptimised the styling of /Users/shaoxuelei/projects/itering/helix-ui/packages/apps/bridges/celer/cBridge/ts-proto/gateway/gateway_pb.js as it exceeds the max of 500KB.
apps: [BABEL] Note: The code generator has deoptimised the styling of /Users/shaoxuelei/projects/itering/helix-ui/packages/apps/bridges/celer/cBridge/ts-proto/gateway/gateway_pb.js as it exceeds the max of 500KB.
apps: info  - Compiled successfully
apps: info  - Collecting page data...
apps: ⛓️ Chains environment: formal; 🖥️ Runtime environment: production
apps: ⛓️ Chains environment: formal; 🖥️ Runtime environment: production
apps: ⛓️ Chains environment: formal; 🖥️ Runtime environment: production
apps: ⛓️ Chains environment: formal; 🖥️ Runtime environment: production
apps: ⛓️ Chains environment: formal; 🖥️ Runtime environment: production
apps: info  - Generating static pages (0/8)
apps: react-i18next:: You will need to pass in an i18next instance by using initReactI18next
apps: react-i18next:: You will need to pass in an i18next instance by using initReactI18next
apps: react-i18next:: You will need to pass in an i18next instance by using initReactI18next
apps: react-i18next:: You will need to pass in an i18next instance by using initReactI18next
apps: info  - Generating static pages (2/8)
apps: info  - Generating static pages (4/8)
apps: info  - Generating static pages (6/8)
apps: ⛓️ Chains environment: formal; 🖥️ Runtime environment: production
apps: ⛓️ Chains environment: formal; 🖥️ Runtime environment: production
apps: react-i18next:: You will need to pass in an i18next instance by using initReactI18next
apps: react-i18next:: You will need to pass in an i18next instance by using initReactI18next
apps: info  - Generating static pages (8/8)
apps: info  - Finalizing page optimization...
apps: Page                                       Size     First Load JS
apps: ┌ ● /                                      9.17 kB        2.07 MB
apps: ├   └ css/8b29d979f6c251fe.css             147 B
apps: ├   /_app                                  0 B            2.06 MB
apps: ├ ○ /404 (3341 ms)                         284 B          2.06 MB
apps: ├ ○ /500 (3361 ms)                         289 B          2.06 MB
apps: └ λ /api/hello                             0 B            2.06 MB
apps: + First Load JS shared by all              2.06 MB
apps:   ├ chunks/framework-9de8fade601d6062.js   45 kB
apps:   ├ chunks/main-fedbb77d25194085.js        27.1 kB
apps:   ├ chunks/pages/_app-8dd00fe0269f7f2a.js  1.99 MB
apps:   ├ chunks/webpack-42076597a433d010.js     2.06 kB
apps:   └ css/cecfe814573589ac.css               549 kB
apps: λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
apps: ○  (Static)  automatically rendered as static HTML (uses no initial props)
apps: ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
lerna success run Ran npm script 'build' in 1 package in 223.8s:
lerna success - apps
✨  Done in 224.39s.

merged apps

 ~/projects/itering/helix-ui/packages/apps/ [bundle_optimize*] yarn analyze
yarn run v1.22.17
$ cross-env ANALYZE=true next build
info  - Loaded env from /Users/shaoxuelei/projects/itering/helix-ui/packages/apps/.env.production
warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

info  - Checking validity of types
warn  - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
info  - Using external babel configuration from /Users/shaoxuelei/projects/itering/helix-ui/packages/apps/.babelrc

warn - Tailwind is not purging unused styles because no template paths have been provided.
warn - If you have manually configured PurgeCSS outside of Tailwind or are deliberately not removing unused styles, set `purge: false` in your Tailwind config file to silence this warning.
warn - https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
[BABEL] Note: The code generator has deoptimised the styling of /Users/shaoxuelei/projects/itering/helix-ui/packages/apps/bridges/celer/cBridge/ts-proto/gateway/gateway_pb.js as it exceeds the max of 500KB.
Webpack Bundle Analyzer saved report to /Users/shaoxuelei/projects/itering/helix-ui/packages/apps/.next/analyze/client.html
[BABEL] Note: The code generator has deoptimised the styling of /Users/shaoxuelei/projects/itering/helix-ui/packages/apps/bridges/celer/cBridge/ts-proto/gateway/gateway_pb.js as it exceeds the max of 500KB.
Webpack Bundle Analyzer saved report to /Users/shaoxuelei/projects/itering/helix-ui/packages/apps/.next/server/analyze/server.html

No bundles were parsed. Analyzer will show only original module sizes from stats file.

Webpack Bundle Analyzer saved report to /Users/shaoxuelei/projects/itering/helix-ui/packages/apps/.next/analyze/server.html
info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data ..⛓️ Chains environment: formal; 🖥️ Runtime environment: production; 🙈Deployment environment: undefined
⛓️ Chains environment: formal; 🖥️ Runtime environment: production; 🙈Deployment environment: undefined
info  - Collecting page data .⛓️ Chains environment: formal; 🖥️ Runtime environment: production; 🙈Deployment environment: undefined
⛓️ Chains environment: formal; 🖥️ Runtime environment: production; 🙈Deployment environment: undefined
⛓️ Chains environment: formal; 🖥️ Runtime environment: production; 🙈Deployment environment: undefined
⛓️ Chains environment: formal; 🖥️ Runtime environment: production; 🙈Deployment environment: undefined
⛓️ Chains environment: formal; 🖥️ Runtime environment: production; 🙈Deployment environment: undefined
info  - Collecting page data ..@polkadot/util has multiple versions, ensure that there is only one installed.
Either remove and explicitly install matching versions or dedupe using your package manager.
The following conflicting packages were found:
    cjs 10.1.4  node_modules/@polkadot/util/cjs
    esm 10.1.4  node_modules/@polkadot/util/
@polkadot/util has multiple versions, ensure that there is only one installed.
Either remove and explicitly install matching versions or dedupe using your package manager.
The following conflicting packages were found:
    cjs 10.1.4  node_modules/@polkadot/util/cjs
    esm 10.1.4  node_modules/@polkadot/util/
@polkadot/util has multiple versions, ensure that there is only one installed.
Either remove and explicitly install matching versions or dedupe using your package manager.
The following conflicting packages were found:
    cjs 10.1.4  node_modules/@polkadot/util/cjs
    esm 10.1.4  node_modules/@polkadot/util/
@polkadot/util has multiple versions, ensure that there is only one installed.
Either remove and explicitly install matching versions or dedupe using your package manager.
The following conflicting packages were found:
    cjs 10.1.4  node_modules/@polkadot/util/cjs
    esm 10.1.4  node_modules/@polkadot/util/
@polkadot/util has multiple versions, ensure that there is only one installed.
Either remove and explicitly install matching versions or dedupe using your package manager.
The following conflicting packages were found:
    cjs 10.1.4  node_modules/@polkadot/util/cjs
    esm 10.1.4  node_modules/@polkadot/util/
@polkadot/util has multiple versions, ensure that there is only one installed.
Either remove and explicitly install matching versions or dedupe using your package manager.
The following conflicting packages were found:
    cjs 10.1.4  node_modules/@polkadot/util/cjs
    esm 10.1.4  node_modules/@polkadot/util/
info  - Collecting page data ...@polkadot/util has multiple versions, ensure that there is only one installed.
Either remove and explicitly install matching versions or dedupe using your package manager.
The following conflicting packages were found:
    cjs 10.1.4  node_modules/@polkadot/util/cjs
    esm 10.1.4  node_modules/@polkadot/util/
info  - Collecting page data
[    ] info  - Generating static pages (0/8)react-i18next:: You will need to pass in an i18next instance by using initReactI18next
react-i18next:: You will need to pass in an i18next instance by using initReactI18next
react-i18next:: You will need to pass in an i18next instance by using initReactI18next
react-i18next:: You will need to pass in an i18next instance by using initReactI18next
react-i18next:: You will need to pass in an i18next instance by using initReactI18next
react-i18next:: You will need to pass in an i18next instance by using initReactI18next
info  - Generating static pages (8/8)
info  - Finalizing page optimization

Page                                       Size     First Load JS
┌ λ /                                      241 kB         2.25 MB
├   /_app                                  0 B            2.01 MB
├ ○ /404                                   284 B          2.01 MB
├ ○ /500                                   289 B          2.01 MB
├ λ /api/hello                             0 B            2.01 MB
├ ● /apps                                  11 kB          2.02 MB
├   └ css/8b29d979f6c251fe.css             147 B
├ λ /transaction                           66.7 kB        2.08 MB
├   └ css/54033a82d6c79f4a.css             5.34 kB
├ λ /transaction/cbridge/[id]              682 B          2.02 MB
├ λ /transaction/s2dvm/[id]                723 B          2.02 MB
├ λ /transaction/s2parachain/[id]          686 B          2.02 MB
├ λ /transaction/s2s/[id]                  714 B          2.02 MB
├ λ /transaction/s2sv2/[id]                699 B          2.02 MB
└ λ /transaction/xcm/[id]                  598 B          2.02 MB
+ First Load JS shared by all              2.01 MB
  ├ chunks/framework-9de8fade601d6062.js   45 kB
  ├ chunks/main-fedbb77d25194085.js        27.1 kB
  ├ chunks/pages/_app-ca902f13ef5c2428.js  1.94 MB
  ├ chunks/webpack-a072d69898c22423.js     2.14 kB
  └ css/036f4f98ffb4e8f6.css               549 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

✨  Done in 180.96s.
sxlwar commented 2 years ago
image
sxlwar commented 2 years ago

https://github.com/ChainSafe/web3.js/issues/1178

sxlwar commented 2 years ago

replace web3 with ethers.js

Page                                       Size     First Load JS
apps: ┌ λ /                                      241 kB         1.45 MB
apps: ├   /_app                                  0 B            1.21 MB
apps: ├ ○ /404                                   284 B          1.21 MB
apps: ├ ○ /500                                   289 B          1.21 MB
apps: ├ λ /api/hello                             0 B            1.21 MB
apps: ├ ● /apps                                  11 kB          1.22 MB
apps: ├   └ css/8b29d979f6c251fe.css             147 B
apps: ├ λ /transaction                           66.7 kB        1.28 MB
apps: ├   └ css/54033a82d6c79f4a.css             5.34 kB
apps: ├ λ /transaction/cbridge/[id]              682 B          1.23 MB
apps: ├ λ /transaction/s2dvm/[id]                723 B          1.23 MB
apps: ├ λ /transaction/s2parachain/[id]          686 B          1.23 MB
apps: ├ λ /transaction/s2s/[id]                  714 B          1.23 MB
apps: ├ λ /transaction/s2sv2/[id]                699 B          1.23 MB
apps: └ λ /transaction/xcm/[id]                  598 B          1.23 MB
apps: + First Load JS shared by all              1.21 MB
apps:   ├ chunks/framework-9de8fade601d6062.js   45 kB
apps:   ├ chunks/main-fedbb77d25194085.js        27.1 kB
apps:   ├ chunks/pages/_app-fd86b0b58fab8d61.js  1.14 MB
apps:   ├ chunks/webpack-84152764bed3ae7f.js     2.15 kB
apps:   └ css/036f4f98ffb4e8f6.css               549 kB
apps: λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
apps: ○  (Static)  automatically rendered as static HTML (uses no initial props)
apps: ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
lerna success run Ran npm script 'build' in 1 package in 79.2s:
lerna success - apps
✨  Done in 80.24s.
image

Refactored bridge component loading strategy

Page                                       Size     First Load JS
┌ λ /                                      245 kB         1.12 MB
├   └ css/b993051e0ab3fae2.css             1 kB
├   /_app                                  0 B             874 kB
├ ○ /404                                   284 B           874 kB
├ ○ /500                                   289 B           874 kB
├ λ /api/hello                             0 B             874 kB
├ ● /apps                                  215 kB         1.13 MB
├   └ css/0178c0ace08d918f.css             16.1 kB
├ λ /transaction                           68.4 kB         976 kB
├   └ css/fdd47b9eb3b4ca42.css             5.33 kB
├ λ /transaction/cbridge/[id]              686 B           894 kB
├ λ /transaction/s2dvm/[id]                726 B           894 kB
├ λ /transaction/s2parachain/[id]          692 B           894 kB
├ λ /transaction/s2s/[id]                  719 B           894 kB
├ λ /transaction/s2sv2/[id]                703 B           894 kB
└ λ /transaction/xcm/[id]                  601 B           894 kB
+ First Load JS shared by all              874 kB
  ├ chunks/framework-9de8fade601d6062.js   45 kB
  ├ chunks/main-fedbb77d25194085.js        27.1 kB
  ├ chunks/pages/_app-183389991bdcb076.js  799 kB
  ├ chunks/webpack-2bcd5b9e22754654.js     2.56 kB
  └ css/b06fe8853bfe1b4f.css               504 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

✨  Done in 72.79s.
sxlwar commented 2 years ago

web3 1.5.3

apps: Page                                       Size     First Load JS
apps: ┌ λ /                                      241 kB         2.13 MB
apps: ├   /_app                                  0 B            1.89 MB
apps: ├ ○ /404                                   284 B          1.89 MB
apps: ├ ○ /500                                   289 B          1.89 MB
apps: ├ λ /api/hello                             0 B            1.89 MB
apps: ├ ● /apps                                  11 kB           1.9 MB
apps: ├   └ css/8b29d979f6c251fe.css             147 B
apps: ├ λ /transaction                           66.7 kB        1.96 MB
apps: ├   └ css/54033a82d6c79f4a.css             5.34 kB
apps: ├ λ /transaction/cbridge/[id]              682 B           1.9 MB
apps: ├ λ /transaction/s2dvm/[id]                723 B           1.9 MB
apps: ├ λ /transaction/s2parachain/[id]          686 B           1.9 MB
apps: ├ λ /transaction/s2s/[id]                  714 B           1.9 MB
apps: ├ λ /transaction/s2sv2/[id]                699 B           1.9 MB
apps: └ λ /transaction/xcm/[id]                  598 B           1.9 MB
apps: + First Load JS shared by all              1.89 MB
apps:   ├ chunks/framework-9de8fade601d6062.js   45 kB
apps:   ├ chunks/main-fedbb77d25194085.js        27.1 kB
apps:   ├ chunks/pages/_app-6ca36e846b54efe1.js  1.82 MB
apps:   ├ chunks/webpack-a072d69898c22423.js     2.14 kB
apps:   └ css/036f4f98ffb4e8f6.css               549 kB
apps: λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
apps: ○  (Static)  automatically rendered as static HTML (uses no initial props)
apps: ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
lerna success run Ran npm script 'build' in 1 package in 95.0s:
lerna success - apps
✨  Done in 95.55s.
sxlwar commented 2 years ago
branch packaging time first load js first load js shared
bundle_optimize (web3_1.7.3) 180.96s 2.25Mb 2.01MB
bundle_optimize_ethers 80.24s 1.45Mb 1.21MB
bundle_optimize_web3_1.5.3 95.55s 2.13Mb 1.89MB
bundle_optimize_ethers (lazyload bridge components) 72.79s 1.12Mb 874K
bundle_optimize_ethers finialize 54.88s 1.06Mb 809K
sxlwar commented 2 years ago

crush lodash

Page                                       Size     First Load JS
┌ λ /                                      244 kB          1.1 MB
├   └ css/b993051e0ab3fae2.css             1 kB
├   /_app                                  0 B             852 kB
├ ○ /404                                   284 B           853 kB
├ ○ /500                                   289 B           853 kB
├ λ /api/hello                             0 B             852 kB
├ ● /apps                                  215 kB          1.1 MB
├   └ css/0178c0ace08d918f.css             16.1 kB
├ λ /transaction                           68.4 kB         954 kB
├   └ css/fdd47b9eb3b4ca42.css             5.33 kB
├ λ /transaction/cbridge/[id]              686 B           872 kB
├ λ /transaction/s2dvm/[id]                726 B           872 kB
├ λ /transaction/s2parachain/[id]          692 B           872 kB
├ λ /transaction/s2s/[id]                  719 B           872 kB
├ λ /transaction/s2sv2/[id]                703 B           872 kB
└ λ /transaction/xcm/[id]                  601 B           872 kB
+ First Load JS shared by all              852 kB
  ├ chunks/framework-9de8fade601d6062.js   45 kB
  ├ chunks/main-fedbb77d25194085.js        27.1 kB
  ├ chunks/pages/_app-e4369f3e98f76d8a.js  778 kB
  ├ chunks/webpack-584faa1bb01e6da9.js     2.56 kB
  └ css/b06fe8853bfe1b4f.css               504 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

✨  Done in 71.39s
image
sxlwar commented 2 years ago

css bundle

before

Permissions Size User       Date Modified Name
.rw-r--r--  137k shaoxuelei  8 9 09:50    0178c0ace08d918f.css
.rw-r--r--   44k shaoxuelei  8 9 09:50    9ae56f4e40ded70a.css
.rw-r--r--   238 shaoxuelei  8 9 09:50    670e385b57114c91.css
.rw-r--r--  6.2M shaoxuelei  8 9 09:50    b06fe8853bfe1b4f.css
.rw-r--r--  3.5k shaoxuelei  8 9 09:50    b993051e0ab3fae2.css
.rw-r--r--  5.0k shaoxuelei  8 9 09:50    dea6091200bdb1c8.css
.rw-r--r--   38k shaoxuelei  8 9 09:50    fdd47b9eb3b4ca42.css

updated

Permissions Size User       Date Modified Name
.rw-r--r--  137k shaoxuelei  8 9 13:53    43db6ac675dadbc1.css
.rw-r--r--   238 shaoxuelei  8 9 13:53    670e385b57114c91.css
.rw-r--r--  199k shaoxuelei  8 9 13:53    173320d99661c452.css
.rw-r--r--  3.5k shaoxuelei  8 9 13:53    b993051e0ab3fae2.css
.rw-r--r--   38k shaoxuelei  8 9 13:53    bd4729d00582d7f1.css
.rw-r--r--  5.0k shaoxuelei  8 9 13:53    dea6091200bdb1c8.css
.rw-r--r--   44k shaoxuelei  8 9 13:53    e9c4ec35dd62b5bb.css
sxlwar commented 2 years ago

The End

Page                                       Size     First Load JS
┌ λ /                                      244 kB         1.06 MB
├   └ css/b993051e0ab3fae2.css             1 kB
├   /_app                                  0 B             809 kB
├ ○ /404                                   284 B           809 kB
├ ○ /500                                   289 B           809 kB
├ λ /api/hello                             0 B             809 kB
├ ● /apps                                  52.3 kB         875 kB
├   └ css/7908c4bbb7f61013.css             14.3 kB
├ λ /transaction                           98.8 kB         924 kB
├   ├ css/3d42f7af571b1189.css             3.73 kB
├   └ css/a275f55dc8670fff.css             6.89 kB
├ λ /transaction/cbridge/[id]              684 B           828 kB
├ λ /transaction/s2dvm/[id]                729 B           828 kB
├ λ /transaction/s2parachain/[id]          690 B           828 kB
├ λ /transaction/s2s/[id]                  717 B           828 kB
├ λ /transaction/s2sv2/[id]                701 B           828 kB
└ λ /transaction/xcm/[id]                  600 B           828 kB
+ First Load JS shared by all              809 kB
  ├ chunks/framework-9de8fade601d6062.js   45 kB
  ├ chunks/main-fedbb77d25194085.js        27.1 kB
  ├ chunks/pages/_app-bf33c4da6e4140a1.js  734 kB
  ├ chunks/webpack-abbf01b6bb144ea1.js     2.8 kB
  └ css/d5ea5910bb7cfff0.css               22.5 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

✨  Done in 54.88s.

Now, the biggest impact on package size is Polkadot-js, see https://github.com/polkadot-js/api/issues/5209

Dashboard

image

Apps

image

More network requests on the dashboard result in a lower score than the apps page, even though the size of apps is much larger than the homepage