✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Adding bundle analyzer to Sanity build command to optimize bundle size

4 replies
Last updated: Feb 11, 2022
Is it possible to add a bundle analyzer to the
sanity build
command? Our bundle size is about 39mb unminified/15mb minified, and it's killing our Gitlab shared runners and preventing us from deploying changes
Feb 9, 2022, 1:04 AM
Hi David. Someone else may have a bit more experience with deeper bundle management tools and studio builds, but I think it could be interesting to try adding an analyzer to the build script in your studio in a test environment to find any potential offending modules that could be impacting your deployment.
My very simple tester is weighing in at just over 11mb minified it seems (including react-icons which might be a decent chunk of that on its own). I am not certain what size range you would be trying to achieve. For comparison, here are my current packages being used:

  "scripts": {
    "start": "sanity start",
    "build": "sanity build public -y"
  },
  "dependencies": {
    "@sanity/base": "^2.27.0",
    "@sanity/core": "^2.27.0",
    "@sanity/dashboard": "^2.27.0",
    "@sanity/default-layout": "^2.27.0",
    "@sanity/default-login": "^2.27.0",
    "@sanity/desk-tool": "^2.27.0",
    "@sanity/eslint-config-studio": "^2.0.0",
    "@sanity/vision": "^2.27.0",
    "eslint": "^8.6.0",
    "prop-types": "^15.7",
    "react": "^17.0",
    "react-dom": "^17.0",
    "react-icons": "^4.3.1",
    "sanity-plugin-media": "^1.4.4",
    "styled-components": "^5.2.0"
  },

Feb 9, 2022, 2:40 AM
Follow up on this - I think I have a super useful analyzing method for you!
This will give you both a terminal output of current node modules and a graphical output in a quick local server for you to dig into:

sanity build --stats --profile --no-minify && npx webpack-bundle-analyzer build-stats.json

Here is the outcome from my tester previously posted:

[6.59 MB] node_modules/react-icons
[1.04 MB] node_modules/@sanity/form-builder
[1.04 MB] node_modules/sanity-plugin-media
[1 MB] node_modules/@sanity/base
[770.69 KB] node_modules/lodash
[670.77 KB] node_modules/@sanity/ui
[634.38 KB] node_modules/@sanity/desk-tool
[556.85 KB] node_modules/date-fns
[361.56 KB] node_modules/rxjs
[360.2 KB] node_modules/framer-motion

Feb 11, 2022, 12:36 AM
Follow up on this - I think I have a super useful analyzing method for you!
This will give you both a terminal output of current node modules and a graphical output in a quick local server for you to dig into:

sanity build --stats --profile --no-minify && npx webpack-bundle-analyzer build-stats.json

Here is the outcome from my tester previously posted:

[6.59 MB] node_modules/react-icons
[1.04 MB] node_modules/@sanity/form-builder
[1.04 MB] node_modules/sanity-plugin-media
[1 MB] node_modules/@sanity/base
[770.69 KB] node_modules/lodash
[670.77 KB] node_modules/@sanity/ui
[634.38 KB] node_modules/@sanity/desk-tool
[556.85 KB] node_modules/date-fns
[361.56 KB] node_modules/rxjs
[360.2 KB] node_modules/framer-motion

Feb 11, 2022, 12:36 AM
Thanks
user U
!
Feb 11, 2022, 12:43 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?