Enhanced Skypack CDN support for the “exports” field

Matthew Phillips updated

Today we’re announcing enhanced support for the package.json “exports” field in the Skypack CDN. 🎉

Many JavaScript packages in the ecosystem provide multiple entrypoints into the package. An entrypoint is a module that can be imported via an import specifier (the string part of the import statement). Most (but not all!) packages provide a main entrypoint that you can import by the package name:

import { h } from 'https://cdn.skypack.dev/preact';

Some packages encourage importing modules other than main (called subpath imports). The reasons for doing this include:

  • The package contains many small utilities. Importing just the ones you need ensures you load the minimal amount of code and your site loads faster.
  • The package has optional modules, such as dev-mode debugging.

For example date-fns encourages this pattern:

import format from 'https://cdn.skypack.dev/date-fns/format';

In the past it has been possible for a user to import any module in a package. This makes it difficult to know which files they are supposed to import. If a package author moves a file around it breaks the user’s code. Some libraries even treat moving files like a breaking change for this reason.

Additionally CDNs like Skypack also can’t optimize your package when every file is a potential entrypoint!

“exports” field

Skypack has supported the “exports” field in package.json for a while, but now we have upgraded our support for this field as its uses and capabilities have expanded in the community. 

This provides better performance and support for a variety of module imports. The field provides benefits such as:

  • Elimination of waterfalls for subpath imports by pre-optimizing.
  • Allows package authors to be explicit about which modules can be imported.
  • Allows package authors to give hints on how to load modules in different environments.
  • Development vs. production package entrypoints (Skypack support coming soon).

In short, the new “exports” field means the Skypack CDN is now more compatible with packages that have subpath imports. As the community continues to adopt this feature we will continue to monitor it and make additional optimizations.

If you’ve run into trouble loading packages with subpath imports before, please try again, it’s likely they’ll now work! If not, feel free to open an issue in the Skypack repo.