Should jQuery or other third-party library be bundled together with logic code?

Question

Nowadays, frontend developers have tools such as webpack, browserify to package the javascript files together. If the scripts are running on server, packaging seems better than separately loading each file at a time. But if we deploy the script to client-side, do we always need to package all scripts together in one file? Or just the code written by ourselves?

For example, jQuery is a very popular third-party library that is used everywhere. If we use webpack to bundle jQuery with our logic code, yes, it reduce the HTTP request times, but waste the browser cache that could reduce more traffic if the user visit the site again or there are multiple pages that use jQuery.

So my question is: should we always bundle all code together in order to reduce one-pass traffic or seperate deploy the common used third-party libraries, especially when using npm/bower + webpack/browserify/elixir. What is the best practice?

Answer 1

As you mentioned, bundling jQuery with your own code negates caching benefit, and jQuery is not small. Further, it's likely that you will at some time want to change your code. You usually won't change jQuery, but you will force the client to re-download it all the same.

Therefore it's a good idea to distribute third-party libraries separately, ideally with much higher cache times.