I'm getting back into front-end development after several years away and am currently using libraries such as Lit and Shoelace from CDNs. My project is mostly vanilla JavaScript and web components, with a WebAssembly engine handling the heavier work, so I don't currently use a build system or bundler. I'd like to keep developing while offline, such as when travelling. Is there a modern, convenient way to make CDN scripts use local cached copies, or is the usual solution to download and manage local copies manually?
4 Answers
A package manager is another good route. Install the libraries with npm or a similar tool, then either let a bundler resolve them from the project or copy the required distribution files into your static assets directory. Once the packages are installed, development and builds can work without network access.
A service worker can cache CDN resources, but it’s usually more complexity than it’s worth for ordinary development. Service-worker caching introduces another layer to debug and can become confusing when dependencies change. I’d start with local vendored files and only use a service worker if the application needs offline behavior in production.
Make the CDN-versus-local choice a single configuration switch instead of changing every script reference. For example, define one base URL and use it in your import map or templates. Online, it points to the CDN; before travelling, switch it to the local vendor directory while keeping the rest of the code unchanged.
The simplest reliable option is to vendor the dependencies locally. Download the files into a folder such as `vendor` or `assets`, then point your import map or script tags at those local paths. You don’t need a bundler just to support offline development.
Keeping the same directory structure as the CDN can make the switch especially painless, since the import paths don’t need to change.