CDN Libraries Reference
Frontend CDN links for JavaScript libraries and CSS frameworks with version pinning guidance.
Back to all tools on ToolForge
| Library | Type | CDN Link (pin version for production) |
|---|---|---|
| jQuery 3.x | JS | https://code.jquery.com/jquery-3.7.1.min.js |
| React 18 | JS | https://unpkg.com/[email protected]/umd/react.production.min.js |
| React DOM 18 | JS | https://unpkg.com/[email protected]/umd/react-dom.production.min.js |
| Vue 3 | JS | https://unpkg.com/[email protected]/dist/vue.global.prod.min.js |
| Vue 2 (Legacy) | JS | https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js |
| Bootstrap 5 CSS | CSS | https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css |
| Bootstrap 5 JS | JS | https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js |
| Tailwind CSS 3 | CSS | https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css |
| Font Awesome 6 | CSS | https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css |
| Lodash 4 | JS | https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js |
| Axios 1.x | JS | https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js |
| Chart.js 4 | JS | https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js |
| Day.js 1 | JS | https://cdn.jsdelivr.net/npm/[email protected]/dayjs.min.js |
| Highlight.js 11 | JS+CSS | https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js |
| Alpine.js 3 | JS | https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js |
| GSAP 3 | JS | https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js |
| Three.js r160 | JS | https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js |
| Google Fonts (Inter) | CSS | https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap |
| Popper.js 2 | JS | https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js |
| Moment.js (legacy) | JS | https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js |
Note: Always pin specific versions in production. CDNs: jsDelivr, unpkg, cdnjs, Cloudflare, Google Fonts.
About CDN Libraries Reference
This reference provides CDN URLs for common frontend libraries and frameworks. These links can be added directly to HTML pages for quick prototyping, demos, or production use with proper version pinning.
For production deployments, always specify exact version numbers and consider implementing Subresource Integrity (SRI) hashes.
Major CDN Providers
| CDN | Source | Features |
|---|---|---|
| jsDelivr | npm + GitHub | Version resolution, HTTP/2, global PoPs |
| unpkg | npm registry | Simple URLs, direct npm access |
| cdnjs | Curated collection | Optimized files, SRI hashes provided |
| Cloudflare | Popular libraries | High performance, DDoS protection |
| Google Fonts | Font hosting, optimization | |
| jQuery CDN | jQuery project | Official jQuery hosting |
Version Pinning Best Practices
Understanding CDN URL Patterns
jsDelivr patterns:
https://cdn.jsdelivr.net/npm/{package}@{version}/{file}
https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js
https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js
unpkg patterns:
https://unpkg.com/{package}@{version}/{file}
https://unpkg.com/[email protected]/umd/react.production.min.js
https://unpkg.com/axios@1/dist/axios.min.js
cdnjs patterns:
https://cdnjs.cloudflare.com/ajax/libs/{library}/{version}/{file}
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css
Subresource Integrity (SRI)
SRI ensures CDN files haven't been modified:
When to Self-Host vs Use CDN
| Factor | CDN | Self-Host |
|---|---|---|
| Performance | Global distribution, edge caching | Depends on your infrastructure |
| Control | Limited (version, availability) | Full control over files |
| Reliability | High uptime, but external dependency | Depends on your hosting |
| Security | Need SRI, trust provider | Full control, your responsibility |
| Privacy/GDPR | Third-party requests | No third-party leakage |
| Offline support | Requires internet | Can bundle with app |
Performance Optimization Tips
- Use specific versions: Prevents unexpected breaks and allows long-term caching
- Enable SRI: Protects against CDN compromise or tampering
- Consider preconnect:
<link rel="preconnect" href="https://cdn.jsdelivr.net"> - Bundle when possible: Reduce HTTP requests by combining dependencies
- Use production builds: Minified files are smaller and faster
- Monitor CDN performance: Use RUM or synthetic monitoring to track latency
Common Use Cases
- Prototyping: Quick setup without npm/build tools
- Demos and Examples: Shareable code that works immediately
- Legacy Projects: Add modern libraries to older codebases
- Small Sites: Avoid build complexity for simple pages
- CDN Fallback Testing: Verify site works with cached CDN resources
- Learning and Education: Teach concepts without tooling overhead
Frequently Asked Questions
- What is a CDN and why use one?
- A CDN (Content Delivery Network) hosts files on distributed servers worldwide, delivering content from the nearest location to users. Benefits include: faster load times, reduced server bandwidth, built-in caching, high availability, and automatic compression. Popular CDNs for libraries include jsDelivr, unpkg, cdnjs, and Cloudflare.
- What is the difference between jsDelivr, unpkg, and cdnjs?
- jsDelivr pulls from npm and GitHub, offers version resolution, and has global PoPs. unpkg serves directly from npm registry with simple URLs. cdnjs is a curated collection with optimized files. All three are free and reliable. jsDelivr offers the most features including version range syntax.
- Should I use specific versions or latest in production?
- Always pin specific versions in production (e.g., [email protected]). Using 'latest' or omitting versions can break your site when libraries update. For development, flexible versioning is acceptable. Consider using lockfiles or build tools for dependency management.
- What is SRI and why is it important?
- SRI (Subresource Integrity) adds a hash attribute to script/link tags, ensuring the file hasn't been tampered with. Example: integrity='sha384-abc123...'. If the CDN serves a modified file, the browser blocks it. Critical for security when using third-party CDNs.
- Can I use CDN libraries for production websites?
- Yes, but consider: pinning specific versions, implementing SRI hashes, having fallback plans if CDN fails, understanding cache behavior, and compliance requirements. For critical applications, self-hosting provides more control and reliability guarantees.
- What are the performance implications of using CDNs?
- CDNs typically improve performance through geographic distribution, HTTP/2 support, and edge caching. However, they add DNS lookups and TCP connections. Benefits include potential cache hits from other sites using the same CDN. Measure actual performance with tools like WebPageTest or Lighthouse.