Skip to content

Chunks are too large when building with vite #1812

Open
@manuelleduc

Description

@manuelleduc

Describe the bug
When building Blocknote with Vite, a chunk of 1,119.73 kB is produced, leading to large JavaScript artifacts being loaded by clients.

To Reproduce
I created a GitHub project to make it easy to reproduce the issue https://github.com/manuelleduc/blocknote-bundle

The project is inspired by the react-ts project proposed by Vite https://vite.dev/guide/#trying-vite-online and by Blocknote quick start https://www.blocknotejs.org/docs/quickstart

Build steps:

pnpm i
pnpm exec vite build

Example of output logs:

vite v7.0.1 building for production...
✓ 1276 modules transformed.
dist/index.html                                         0.30 kB │ gzip:   0.23 kB
dist/assets/inter-v12-latin-100-BQDzDElq.woff2         16.55 kB
dist/assets/inter-v12-latin-regular-YtgfLPRn.woff2     16.71 kB
dist/assets/inter-v12-latin-900-CMga-52B.woff2         17.18 kB
dist/assets/inter-v12-latin-300-DEbyFmpd.woff2         17.33 kB
dist/assets/inter-v12-latin-200-BxfrU12A.woff2         17.34 kB
dist/assets/inter-v12-latin-500-DfX5FI9E.woff2         17.55 kB
dist/assets/inter-v12-latin-600-BvOeHRLc.woff2         17.66 kB
dist/assets/inter-v12-latin-800-Bdy4lAMa.woff2         17.76 kB
dist/assets/inter-v12-latin-700-Bj1B9WKG.woff2         17.78 kB
dist/assets/inter-v12-latin-100-46Mq0mOp.woff          21.24 kB
dist/assets/inter-v12-latin-regular-CahmJf_6.woff      21.42 kB
dist/assets/inter-v12-latin-900-ORHAl5ZU.woff          21.98 kB
dist/assets/inter-v12-latin-300-f7r92Nkj.woff          22.16 kB
dist/assets/inter-v12-latin-200-DXfqWPZg.woff          22.24 kB
dist/assets/inter-v12-latin-500-BQ2gQN_M.woff          22.52 kB
dist/assets/inter-v12-latin-600-D01NXWOK.woff          22.64 kB
dist/assets/inter-v12-latin-700-B5TOIllR.woff          22.68 kB
dist/assets/inter-v12-latin-800-DFVvDWwT.woff          22.71 kB
dist/assets/index-DdTDXq7U.css                        186.72 kB │ gzip:  29.64 kB
dist/assets/default-0Dp3JUBc.js                         0.03 kB │ gzip:   0.05 kB
dist/assets/index-UBgLExeH.js                           0.13 kB │ gzip:   0.13 kB
dist/assets/index-D4Wp6AEg.js                           0.16 kB │ gzip:   0.14 kB
dist/assets/index-c2V3InAJ.js                           0.19 kB │ gzip:   0.16 kB
dist/assets/index-3OOFrDax.js                           0.26 kB │ gzip:   0.21 kB
dist/assets/index-DTzQ7r7Q.js                           0.27 kB │ gzip:   0.20 kB
dist/assets/index-C2o2j-tx.js                           0.30 kB │ gzip:   0.21 kB
dist/assets/index-Ch_qCilz.js                           0.32 kB │ gzip:   0.19 kB
dist/assets/index-C_aolqmU.js                           0.51 kB │ gzip:   0.31 kB
dist/assets/index-hRuAkC1j.js                           0.53 kB │ gzip:   0.32 kB
dist/assets/index-Tlm8e_FK.js                           0.66 kB │ gzip:   0.45 kB
dist/assets/index-CfyObm-o.js                           1.00 kB │ gzip:   0.51 kB
dist/assets/blank-line-D3C7De5j.js                      1.38 kB │ gzip:   0.76 kB
dist/assets/index-BCPnb1JI.js                           1.48 kB │ gzip:   0.74 kB
dist/assets/index-DpipQwVu.js                           1.62 kB │ gzip:   0.77 kB
dist/assets/index-BdmKeUBW.js                           3.01 kB │ gzip:   1.27 kB
dist/assets/index-nOtcpH01.js                           3.07 kB │ gzip:   1.43 kB
dist/assets/index-D7-7PmSP.js                           4.52 kB │ gzip:   1.92 kB
dist/assets/index-DfqHrlIU.js                           6.47 kB │ gzip:   2.55 kB
dist/assets/index-Bkohaulx.js                           6.51 kB │ gzip:   2.47 kB
dist/assets/index--n2O05f-.js                           7.83 kB │ gzip:   2.81 kB
dist/assets/index-CtreMsrK.js                          12.05 kB │ gzip:   3.62 kB
dist/assets/index-DoJwJBw7.js                          12.16 kB │ gzip:   3.80 kB
dist/assets/index-5Zz36bbo.js                          13.65 kB │ gzip:   5.45 kB
dist/assets/index-CS_xzTwR.js                          18.05 kB │ gzip:   6.33 kB
dist/assets/index-DdbShWyY.js                          18.15 kB │ gzip:   6.11 kB
dist/assets/index-BuQLf8Am.js                          27.23 kB │ gzip:   8.68 kB
dist/assets/index-BxE2facF.js                          54.17 kB │ gzip:  15.03 kB
dist/assets/module-DrROFPns.js                         77.26 kB │ gzip:  27.77 kB
dist/assets/index-D-5rahc_.js                         171.58 kB │ gzip:  51.89 kB
dist/assets/native-48B9X9Wg.js                        432.75 kB │ gzip:  82.80 kB
dist/assets/index-CF3KMgKs.js                       1,119.73 kB │ gzip: 340.53 kB

(!) Some chunks are larger than 500 kB after minification. Consider:                                                                                                                                                                  
- Using dynamic import() to code-split the application                                                                                                                                                                                
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks                                                                                                    
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.                                                                                                                                                           
✓ built in 4.04s

See below a screenshot of pnpx vite-bundle-visualizer -o stats.html

Image

Let me know if you know way for me to improve this in a non intrusive way. Thanks!

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions