JS依赖应打包进Bundle还是通过CDN加载？主流工具为何倾向打包？

Great question! I’ve wondered about this too when I first started diving into modern frontend tooling—let’s break down the core reasons why bundling dependencies from node_modules has become the go-to approach, even though CDN caching seems like an obvious win for performance.

1. Ironclad Version Consistency & Dependency Conflict Prevention #

When you pull dependencies into node_modules, you’re locking in exact versions (thanks to package-lock.json or yarn.lock). This means every part of your app—from your custom code to the nested dependencies of React, Angular, or any library—runs on versions you’ve tested and confirmed work together.

If you relied on a CDN, you’d be at the mercy of:

• Accidental version updates from the CDN that break your app (e.g., React 18’s strict mode changes breaking a React 17 codebase)
• Version mismatches between different CDN-hosted libraries (e.g., a component library expecting Lodash 4.x but your CDN serves 3.x)
  Bundling eliminates all these risks—you’re in full control of every line of dependency code that ships to users.

2. Tree Shaking & Targeted Code Reduction #

Modern bundlers like Webpack, Rollup, and Vite support tree shaking: a feature that strips out unused code from your dependencies. For example, if you only use _.debounce from Lodash, you don’t have to ship the entire 50KB+ Lodash library—you can bundle just that single function (especially if you use Lodash ES modules).

With a CDN, you’re stuck loading the full, unoptimized version of the library, even if you only use 1% of its features. This adds unnecessary weight to your app, hurting load times despite any CDN caching benefits.

3. Fewer HTTP Requests & Optimized Resource Delivery #

While CDN caching helps with repeat visits, first-time visitors have to load multiple CDN-hosted files (e.g., React, ReactDOM, a router, a state library). Each file requires a separate HTTP request—before HTTP/2, this meant significant overhead from TCP handshakes and latency. Even with HTTP/2, merging dependencies into a single (or a few optimized) bundles reduces connection overhead and lets bundlers apply additional optimizations like:

• Minification (removing whitespace, renaming variables)
• Code splitting (splitting bundles into chunks that load only when needed)
• Compression (gzip or Brotli)
  These optimizations often result in smaller total payload sizes than loading multiple unoptimized CDN files.

4. Offline Support & PWA Compatibility #

If you’re building a Progressive Web App (PWA) or need offline functionality, bundling dependencies is critical. Service Workers can only cache resources from your own domain (or domains you’ve explicitly allowed via CORS and cache policies). CDN resources are often cross-domain, making it harder to cache them reliably for offline use.

By bundling dependencies into your app’s assets, you can fully control how they’re cached by Service Workers, ensuring your app works even when users have no internet connection.

5. Enhanced Security & Control #

Using a CDN means trusting a third-party server to serve critical code to your users. If the CDN goes down, gets hacked, or injects unexpected code (like ads or analytics), your app breaks or becomes vulnerable.

When you bundle dependencies, you’re shipping code that you’ve audited (or can audit) and host on infrastructure you control. You avoid the risk of third-party outages or malicious code injection, which is especially important for enterprise or security-sensitive apps.

6. Consistent Development & Production Environments #

Bundling ensures your development environment (where you use local node_modules) matches production exactly. No more "it works on my machine" bugs caused by CDN versions differing from what you tested locally. Plus, tools like hot module replacement (HMR) work seamlessly with local dependencies, making development faster and more reliable.

Wrapping Up #

Don’t get me wrong—CDNs still have their place for ultra-stable, widely used libraries (e.g., jQuery in legacy apps). But for modern frontend projects, the benefits of version control, code optimization, security, and offline support far outweigh the potential caching gains of CDNs. Bundling node_modules dependencies gives you full control over your app’s codebase, resulting in a more reliable, performant, and maintainable product.

内容的提问来源于stack exchange，提问作者Rafid