CDN-First JavaScript: Is It Still Relevant?
In an era dominated by build tools like Vite and webpack, loading JavaScript directly from a CDN might feel old-fashioned. But it's far from obsolete. For prototypes, embedded widgets, CMS integrations, and lightweight apps, dropping a <script> tag pointing to a CDN is the fastest way to get started — and often the right architectural choice.
Two of the most popular frameworks for this approach are React and Vue. Let's compare how they perform in a CDN-first context.
Loading React via CDN
React requires two separate script tags: react (the core library) and react-dom (for browser rendering). You'll also need Babel if you want to use JSX — which adds another dependency and a client-side compilation step.
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>Without a build step, you lose JSX and must use React.createElement() directly — verbose and less ergonomic.
Loading Vue via CDN
Vue was designed with CDN use in mind. A single script tag gives you the full framework, and Vue's template syntax works natively in HTML without any compilation step:
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>This makes Vue significantly friendlier for CDN-first development, especially for developers who want to progressively enhance existing HTML pages.
Side-by-Side Comparison
| Criteria | React 18 (CDN) | Vue 3 (CDN) |
|---|---|---|
| CDN Bundle Size (min+gzip) | ~45 KB (react + react-dom) | ~34 KB |
| Number of Script Tags | 2+ (+ Babel for JSX) | 1 |
| Template Syntax in HTML | No (requires JSX or createElement) | Yes (native HTML templates) |
| Learning Curve (CDN mode) | Steeper | Gentler |
| Ecosystem Size | Very large | Large |
| Best CDN Use Case | SPAs with build step later | Progressive enhancement, prototypes |
When to Choose React via CDN
- You're scaffolding a proof-of-concept that will eventually use a full build pipeline.
- Your team has strong existing React expertise.
- You're embedding a React component into a non-React page and can tolerate the overhead.
When to Choose Vue via CDN
- You want to add interactivity to existing HTML pages without a build step.
- You're building a lightweight dashboard, widget, or landing page enhancement.
- You're working in a CMS environment (WordPress, Drupal) where a build tool isn't practical.
- Onboarding junior developers who benefit from Vue's readable, HTML-close syntax.
The Verdict
For pure CDN-first development, Vue wins on simplicity, smaller payload, and HTML-native templating. React's CDN story is more awkward without a build tool. That said, both frameworks are excellent choices once you introduce a proper build pipeline — at which point the CDN loading method becomes less relevant. Choose based on your team's skills, your project's long-term needs, and how much overhead you can accept at the script-loading stage.