Is bundling (webpack/browserify) faster than going through a CDN?

Question

I was just curious if anyone had done any research into this matter.

At my place of work we have React, Bluebird, jQuery, and Lodash in every single one of our projects/bundles.

We use webpack to bundle all of these dependencies, but I'm not sure if it is actually worth it... I would think that a lot of these scripts would be cached on the user's browser.

Using the CDN and moving these packages out of the webpack bundle would decrease build times and simplify our build process a lot. We have to support IE8 so we have to run React through envify and ES3ify.

Has anyone done any research into how much the browser can leverage caching for common libraries?

Answer 1

Bundling reduces the number of TCP connections needed to download external content (JavaScript/CSS). If your bundler also minifies the content, it additionally reduces the number of bytes the client needs to fetch.

Using a CDN places your content... whether or not you bundle it... closer to the web browser that is trying to download it.

For best results, use both.

Bundling is free, using a CDN is generally quite cheap. If free is your only option, by all means bundle. If you can budget a CDN as well, place your bundled content on the CDN.

UPDATE

Based on your comment - Do not self-host common dependencies that are hosted by high-traffic, public CDN's such as Google. There is an excellent chance that a user already has what you need in cache. See for example 3 reasons why you should let Google host jQuery for you.