Should JS dependencies be packed in the bundle, or loaded via CDN?

Question

The answer I always assumed for this question is that common dependencies should be loaded via a CDN. This way common JS libraries are cached in the browser and loading become faster. However, many libraries online, e.g. React and Angular, and many packing system, e.g. Webpack and SystemJS, seems to be geared toward packing the JS dependencies in node_modules folder in the same bundle, so your website in production ends up loading one single bundle containing everything.

So my question is, what is the preferred way for loading dependencies? Bundling in the same JS file? Or via a CDN?

Answer 1

There are some arguments:

1. When using CDN, browser spends additional time for DNS-resolve of CDN host.
2. When you are building app, you can use tree shaking, to remove unused code.
3. If your site has security value, it is bad idea to use CDN.
4. You can't guarantee, that CDN server will be live forever.