3

I've been a relentless proponent of small files. I prefer one function export per file, functions with everything-in-one-view, and breaking up UI components as much as sensible (which is why I love React).

There are many benefits to this from a code-maintenance and clarity perspective (IMO), but I have never assessed what the impact may be on overall bundle size and compilation time (Webpack is tagged here, but other build tools are applicable). My assumption has always been that the benefit of small files is worth what is probably a minor or even negligible difference in bundle size and speed. But I would like some data to back up or refute this assumption without having to massively refactor an existing app for comparison.

So, what is the impact of many-small vs fewer-larger files on bundle size and compilation time?

Improve this question
5
  • 1
    I would appreciate explanations for the downvotes. I'm a regular on SO (rep: 12k+), but this is my first time posting here. I think my question fits the on-topic guidelines: softwareengineering.stackexchange.com/help/on-topic
    – Faust
    Commented Feb 4, 2020 at 20:46
  • you are compiling javascript?
    – Ewan
    Commented Feb 4, 2020 at 20:52
  • @Ewan, "transpiling" is a more accurate term. Are you not familiar with how single-page applications are put together? Babel-js is usually used for the transpilation. Modern bundlers include webpack, rollup, browserify, etc.
    – Faust
    Commented Feb 4, 2020 at 21:07
  • ahh, you mean squishing together into big files! No, i am not certain whether it takes the computer longer the more small files you want to squish. It shouldnt in principle make a difference to the end product right
    – Ewan
    Commented Feb 4, 2020 at 21:11
  • If you're really worried about this, you could always add a preprocessor to your build script that simply concatenates the files, then use that as the source for transpilation. I doubt it would take more than a few seconds, depending on your hardware. Honestly thought I think you're much better off spending your development budget on other problems.
    – John Wu
    Commented Feb 5, 2020 at 1:49

1 Answer 1

Reset to default
2

There are really two separate, but closely related questions here. First is the question about bundle size, and the second is about the time it takes to build the bundles.

Bundle size, and by this I assume you mean the resulting size of the JavaScript file, is not likely to be very relevant. Most transpilers have the option to minify or obfuscate the source code, which reduces file size. Most web servers should be configured to deliver static text assets like CSS and JavaScript as compressed files, which further reduces file size. The concern about bundle size is likely to be premature optimization.

The second concern about the length of time it takes to transpile these files: how long does it really take? Fives seconds? Ten seconds? How long is too long? And better yet, how much will it cost to pay engineers to micro optimize the build process compared to giving developers and/or the build server SSD drives? This is another case of premature optimization. Your time and the company's money is better spent elsewhere.

This is all about performance, and the only solution to performance problems is to measure them. Nine times out of ten the difference in performance is not worth the development time.

Improve this answer
2
  • JavaScript code size has impact on client performance. Low and mid-range mobiles struggle with parsing large JS even today. Also: transpilers also tend to merge the JS files into a single one if possible AFAIK.
    – jaskij
    Commented Feb 5, 2020 at 9:24
  • @JanDorniak: That is true that mobile devices struggle with this, but when the application is large to begin with it will be a struggle no matter what. It will work hard to parse a few large JS files, or bog down because it has many small files to download over a spotty wireless network. Again, the answer is to profile the application on multiple devices and browsers to identify the bottle necks. DOM manipulation is another area of concern as well.
    – Greg Burghardt
    Commented Feb 5, 2020 at 11:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.