javascriptjquerybootstrap-4gulp-concatfont-awesome-5

Concatenating JS Files


We use Twitter Bootstrap, Font Awesome PRO (SVG), and JQuery in our custom WP Theme. For the .js files, providing we set the order correctly, i.e., JQuery > Bootstrap > Font Awesome > Site JS, is there any issue with concatenating these .js files together in one minified file (noting that the file size will be larger for the sake of saving multiple page asset requests on load)? I'm not sure whether or not that by doing this, it may create page/element rendering issues somehow. Thanks.


Solution

  • The only problem this produces is that you lose out on using previously-cached files for jQuery, Bootstrap, etc.

    The best case scenario for having them as multiple files is no loading at all. The worst case being multiple requests being made which is negated by HTTP/2.

    Meanwhile, for bundling, the sole case scenario is a single request for a large file. You don't win anything by concatenating them.