I am using preact, following the docs, I have used the command npx preact-cli create default my-project to set up the project. It is suggested that preact projects are accompanied with low sizes, so I decided to test it and tried npm run build right away without changing the boilderplate. The result is showing a bit over 700kb of size for the build folder.I have read that it should be around 30 to 50 kb. I need to achieve this size, for the project, as preact was chosen because of its being low in size.
Preact build size is too large
Viewed 238
1 Answers
Bundle sizes are not measured by the raw size of the output directory.
Firstly, the output directory contains content that is not to be used in bundle size discussions. Items like images, SSR intermediary output (separate from the actual result of prerendering), and semi-duplicated output for non-ESM environments are provided. None of these contribute to your bundle size.
Secondly, you're ignoring route splitting. Each component in routes/ is automatically split out, so the user only gets each route when they navigate to them. Say you have /, /about, and /error. The content of /about and /error are not sent to the client when / is requested. You could have hundreds of pages of content, but that does not mean they're all loaded at once.
Thirdly, the size of that directory on disk isn't compressed, unlike webserver output. Gzip and Brotli are rather great at what they do and will further reduce sizes.
Preact-CLI has an option to open a bundle analyzer on your builds (preact build --analyze). Otherwise, run the production-like server we ship with and open your browser. You can see the bundles as a client would (minus the compression).
Related