Solve the cascading cache invalidation problem by using importmap

[bhbs]

Related: #6773 (Referenced implementation)

PoC: #15373
for Production: #16552

Summary

Solving the Cascading Cache Invalidation Problem using importmap.

Basic Example

Rewrite import paths and embed importmap in HTML.

assets/main-[contentHash].js

import("./module-[contentHash].js")

to

import("./module-[idHash].js")

index.html

<script type="importmap">
{
  "imports": {
    "./assets/module-[idHash].js": "./assets/module-[contentHash].js"
  }
}
</script>

Even if the content hash of the module changes, the cache for main.js won't be invalidated 👍

Motivation

Modern tools, including Vite, are having the Cascading Cache Invalidation Problem. Among the solutions, using importmap is the simplest and most powerful. With the release of Safari 16.4 in March 2023, importmap became available in major browsers. Some libraries are also looking to solve this problem.

• Remix Use import maps to increase cache-ability of assets remix-run/remix#3265
• Svelte Use import maps for better caching sveltejs/kit#4482

Detailed Design

• PoC: feat: 🧪 chunkMap #15373

The process involves editing imports during renderChunk step and writing the importmap via buildHtmlPlugin hook.

Why not implement it as a plugin?

1. Approach of analyzing and rewriting assets after build process

• It is complicated to consider the impact on sourcemap, etc.
• In worker threads, importmap are not supported. It is inefficient as it requires building the module tree to analyze if the entry is a worker.

2. Approach of concluding within the build process

• During the CSS processing, there's a feature to collect the names (before hashing) of empty chunks for CSS in the renderChunk and to delete them in the generateBundle step. It's necessary to consider the difference between the keys of the bundle list and the hash included in the file name written inside the import during this process (cssPostPlugin).
• Only one importmap can be loaded within HTML. If an importmap already exists, it needs to be integrated (buildHtmlPlugin).
• It is necessary to consider importmap during import analysis (buildImportAnalysisPlugin).

Why new hashes are added instead of removing them?

• By default, Vite outputs flatly assets/*.js, so there's a possibility that the keys of importmap might duplicate.
• When using import with query suffixes like ?worker or ?raw for a single file, the file name remains the same, so there's a possibility that the keys of the importmap might duplicate. Identifiable values like facadeModuleId should be used.

Drawbacks

In cases like with VitePress, where the outputs are directly imported using Node.js, importmap cannot be used, or an implementation considering importmap becomes necessary.

Alternatives

• SvelteKit
  • feat: import maps sveltejs/kit#11615
• Parcel
  • https://parceljs.org/features/production/#cascading-invalidation
• Service worker / Custom script-based loader
  • https://philipwalton.com/articles/cascading-cache-invalidation/

Adoption Strategy

Does not require migrations from plugin authors.

Unresolved Questions

• Legacy support seems feasible with systemjs-importmap. Under investigation. done 👍 22f8d74

[bhbs]

If it's okay, please let me contribute to the implementation 👍

[bhbs]

• feat: chunk importmap #16552

[dashixiong91]

very good! It does solve the problem.