Adding bundle analyzer to Sanity build command to optimize bundle size
4 replies
Last updated: Feb 11, 2022
D
Is it possible to add a bundle analyzer to the
sanity buildcommand? 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
J
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:
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
J
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:
Here is the outcome from my tester previously posted:
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
J
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:
Here is the outcome from my tester previously posted:
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
D
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.