📦
If you've been living under a rock, you've probably seen a stack overflow answer recommending you just drop a script tag from Skypack or jsDelivr into your HTML. "Zero build step!" they say. "It's optimized!" they promise. Plot twist: it's not.
The performance hit of hitting a third-party CDN for every page load is real, and it's invisible until you measure. A 150ms redirect chain on first navigation because the CDN didn't cache aggressively enough. A cache miss on mobile because the user's ISP doesn't cooperate with the CDN's edge nodes. A version mismatch in production because the "@latest" semver tag changed overnight. Netlify Edge Functions and Vercel are smart about this, but generic CDN scripts? They're a liability.
Self-hosting your npm packages gives you three things: speed, reliability, and control. You version-lock them at deploy time, not at browser time. If a library has a security patch, you update your `package.json`, run `npm install`, rebuild, and deploy — not "hope the CDN did the right thing." When you inspect the network tab, it's a cache hit 95% of the time, served from your own origin with your own cache headers.
Here's the pattern: treat your node_modules like a first-class asset. Bundle your critical dependencies into your build output, version them explicitly, and let your CDN cache headers do the work. No external requests. No redirects. No "why is this library loading from three different domains?"
The code is trivial:
```javascript
// package.json
{
"type": "module",
"dependencies": {
"gsap": "^3.12.0",
"lenis": "^1.1.8"
}
}
// vite.config.js (or astro.config.mjs with getViteConfig)
export default {
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['gsap', 'lenis']
}
}
}
}
}
```
Your build now outputs a vendor chunk. You ship it from your origin. Done. No CDN script tag. No version surprises. 15KB gzipped instead of 45KB over the wire because you're not pulling in twice.
The catch: you're responsible for security patches. If a library has a vulnerability, you need to know and act fast. npm audit tells you what to do. A quick `npm update gsap` and redeploy. That's the actual "worst case."
Real talk: CDN scripts are convenient when you're building a one-off demo or a static HTML file with no build step. But if you're shipping production code with a build tool (webpack, Vite, Esbuild, anything), self-hosting wins every single time. Better performance, better reliability, better developer experience.
Skypack and jsDelivr are cool projects. They're not the answer for your main bundle.