feat: chunk importmap #16552

bhbs · 2024-04-29T06:51:18Z

It seems that many people have been requesting improvements in chunk cache efficiency, so I've created this PR. Please take a look and review this! Thank you, Vite team!

Description

Fixes: #6773
PoC: #15373
Discussion: #15372

Creating an importmap for chunks helps prevent cascading cache invalidation. This importmap features a list of filenames with file ID-based hashes linked to filenames with content-based hashes. When one chunk references another, it uses the ID-hashed filename instead of the content-hashed filename. As a result, only the updated chunk requires cache invalidation in the browser, leaving intermediary chunks unchanged. This strategy enhances the cache hit rate following deployments.

Implementation

During the renderChunk step, file hash placeholders in the code are overwritten with stable ID hashes. This process also maintains a record of the hash placeholders and their corresponding ID hashes. (After that, during the augmentHash step, filenames are assigned based on the content.)

Based on the generated chunk list and the record of hash placeholders and their corresponding hashes, an importmap is generated and inserted into the HTML.

Others

An importmap is generated for legacy bundles using the same method, but a systemjs-importmap is inserted instead of a standard importmap.
The importmap is considered during CSS processing (cssPostPlugin).
The importmap is considered during import analysis (buildImportAnalysisPlugin).
Only one importmap can be loaded at a time (MDN). If an importmap already exists, it needs to be merged (buildHtmlPlugin).

stackblitz · 2024-04-29T06:51:20Z

Run & review this pull request in StackBlitz Codeflow.

olivierbeaulieu · 2024-07-12T14:28:25Z

This fixes such a gigantic performance issue in almost every vite app out there - thanks a lot! Hopefully this can get merged soon 👀

Lgowen · 2024-08-15T10:10:38Z

So this PR has not been merged yet, right?

paolostyle · 2024-09-11T21:27:18Z

Is there any way to ask the maintainers to review this? It's a shame that such a useful PR is open for over 4 months without any reviews...

C-Higgins · 2024-09-18T21:35:00Z

What is the simplest way to consume this code manually, until (if ever) it gets merged?

juanespinola05 · 2024-09-19T12:40:46Z

What is the simplest way to consume this code manually, until (if ever) it gets merged?

This ☝

sapphi-red

Thanks for working on this! Sorry that it took time to review.
While I think it needs some small things to polish, the approach looks good to me. I think the remaining tasks are to think about how this works with experimental.renderBuiltUrl and think about the interaction with plugins.

sapphi-red · 2024-10-17T02:52:18Z

docs/config/shared-options.md

+## html.chunkImportMap
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+Whether to inject importmap for generated chunks. This importmap is used to optimize caching efficiency.
+


It seems build.chunkImportMap is used instead of html.chunkImportMap in the code.
I think build.chunkImportMap is better as I think we should have an option to generate the import map in a separate file so that frameworks and users using backend integration can use it.
Let's move this description to docs/config/build-options.md.

Might even be worth being an experimental feature. build.experimentalChunkImportMap

Im really looking forward to this change as itll be a massive win for users.

I expect though at this time there may be gotchas we need to learn and patch, as people report behaviour issues with there individual setups.

I think we can set experimental without changing the name. 👍

docs/guide/features.md

packages/vite/src/node/plugins/chunkImportMap.ts

sapphi-red · 2024-10-17T03:19:35Z

packages/vite/src/node/plugins/chunkImportMap.ts

+        return [
+          base + augmentFacadeModuleIdHash(output.preliminaryFileName),
+          base + output.fileName,
+        ]


📝 Note to reviewers: the mapping by the browsers is operated after both the module specifier and the key of import maps are resolved to absolute URLs.
https://html.spec.whatwg.org/multipage/webappapis.html#import-maps:~:text=Such%20remappings%20operate,app.mjs%22

sapphi-red · 2024-10-17T03:21:36Z

packages/vite/src/node/plugins/chunkImportMap.ts

+      config.root,
+      normalizePath(filename),
+    )
+    const assetsBase = getBaseInHTML(relativeUrlPath, config)


I guess this does not take experimental.renderBuiltUrl into account. For non-runtime ones, we can generate a static import map. But for runtime ones, I guess we would need to output an script that constructs an import map.

I haven’t come up with a good way to use it together with the renderBuiltUrl runtime yet.
Considering that we need to handle the import map from other plugins, we’ll need some kind of clever solution.
Are there any other options that could be used as a reference?

I’ll need some time to investigate and think it over.

I guess there aren't any.

packages/vite/src/node/plugins/importAnalysisBuild.ts

sapphi-red · 2024-10-17T03:58:55Z

packages/plugin-legacy/src/index.ts

@@ -519,6 +566,16 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
        }
      }



When build.chunkImportMap is enabled, I guess the application won't work if the browser does not support import maps but supports all features included in detectModernBrowserDetector.
I think we need to add if(HTMLScriptElement&&HTMLScriptElement.supports("importmap"))throw new Error; to detectModernBrowserDetector and modernChunkLegacyGuard.

I tried simply adding an if statement at the end of detectModernBrowserDetector, but it doesn't seem to have worked 👀
It seems that __vite_legacy_guard inside modernChunkLegacyGuard is not being executed from anywhere.
Could you explain how it works?

It seems that __vite_legacy_guard inside modernChunkLegacyGuard is not being executed from anywhere.
Could you explain how it works?

The current modernChunkLegacyGuard uses the fact that browsers errors without executing a script if the script has invalid syntax (unsupported syntax). But in this case, we are judging with runtime code instead of a syntax. So I was suggesting adding the code in modernChunkLegacyGuard (i.e. changing modernChunkLegacyGuard to `if(HTMLScriptElement&&HTMLScriptElement.supports("importmap"))throw new Error;`);export function __vite_legacy_guard(){${detectModernBrowserDetector}};`.

That said, I noticed that the script that has the throw new Error won't run but still the scripts imported by that script would run. Hmm...

sapphi-red · 2024-10-17T04:01:59Z

packages/vite/src/node/plugins/css.ts

+      const chunkImportMap = config.build.chunkImportMap
+        ? createChunkImportMap(bundle)
+        : {}


Probably we need to think about how to let other plugins access this information. I assume other plugins will need to access this information sometimes.

sapphi-red · 2024-10-17T04:11:40Z

packages/vite/src/node/plugins/chunkImportMap.ts

+      Object.values(meta.chunks).forEach((chunk) => {
+        const hashPlaceholder = chunk.fileName.match(hashPlaceholderRE)?.[0]
+        if (!hashPlaceholder) return
+        if (hashPlaceholderToFacadeModuleIdHashMap.get(hashPlaceholder)) return
+
+        hashPlaceholderToFacadeModuleIdHashMap.set(
+          hashPlaceholder,
+          getHash(chunk.facadeModuleId ?? chunk.fileName),
+        )
+      })
+
+      const codeProcessed = augmentFacadeModuleIdHash(code)
+      return {
+        code: codeProcessed,
+        map: new MagicString(codeProcessed).generateMap({
+          hires: 'boundary',
+        }),


📝 For reviewers: This works as rollup calculates the chunk hash after the renderChunk hooks are run since Rollup 3.

Reference: https://www.youtube.com/watch?v=cFwO9UvDzfI

bhbs · 2024-10-17T14:13:43Z

Thank you for the review ✨
I should have some time this weekend, so I'll incorporate your feedback.

…solver

…ilePathInJS`

bhbs · 2024-10-21T15:23:09Z

I’ve pushed what I have for now!
But still these tasks remains:

I think the remaining tasks are to think about how this works with experimental.renderBuiltUrl and think about the interaction with plugins.

I need more time 🧐

sapphi-red · 2024-10-22T04:38:19Z

docs/guide/features.md

+
+### Chunk importmap
+
+Creating an import map for chunks helps prevent the issue of cascading cache invalidation. This import map features a list of stable file IDs linked to filenames with content-based hashes. When one chunk references another, it utilizes the file ID instead of the content-hashed filename. As a result, only the updated chunk needs cache invalidation in the browser, leaving intermediary chunks unchanged. This strategy enhances the cache hit rate following deployments.


Suggested change

Creating an import map for chunks helps prevent the issue of cascading cache invalidation. This import map features a list of stable file IDs linked to filenames with content-based hashes. When one chunk references another, it utilizes the file ID instead of the content-hashed filename. As a result, only the updated chunk needs cache invalidation in the browser, leaving intermediary chunks unchanged. This strategy enhances the cache hit rate following deployments.

Creating an import map for chunks helps prevent the issue of cascading cache invalidation. This import map features a list of stable file IDs linked to filenames with content-based hashes. When one chunk references another, it utilizes the file ID instead of the content-hashed filename. As a result, only the updated chunk needs cache invalidation in the browser, leaving intermediary chunks unchanged. This strategy enhances the cache hit rate following deployments.

To enable this feature, set [`build.chunkImportMap`](/config/build-options.md#build-chunkimportmap) to `true`.

sapphi-red · 2024-10-22T04:42:57Z

docs/config/shared-options.md

+## html.chunkImportMap
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+Whether to inject importmap for generated chunks. This importmap is used to optimize caching efficiency.
+


I think we can set experimental without changing the name. 👍

sapphi-red · 2024-10-22T04:43:02Z

docs/config/build-options.md

+## build.chunkImportMap
+
+- **Type:** `boolean`
+- **Default:** `false`


Suggested change

- **Default:** `false`

- **Default:** `false`

- **Experimental**

#16552 (comment)

sapphi-red · 2024-10-22T04:50:24Z

packages/plugin-legacy/src/index.ts

@@ -519,6 +566,16 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
        }
      }



It seems that __vite_legacy_guard inside modernChunkLegacyGuard is not being executed from anywhere.
Could you explain how it works?

The current modernChunkLegacyGuard uses the fact that browsers errors without executing a script if the script has invalid syntax (unsupported syntax). But in this case, we are judging with runtime code instead of a syntax. So I was suggesting adding the code in modernChunkLegacyGuard (i.e. changing modernChunkLegacyGuard to `if(HTMLScriptElement&&HTMLScriptElement.supports("importmap"))throw new Error;`);export function __vite_legacy_guard(){${detectModernBrowserDetector}};`.

That said, I noticed that the script that has the throw new Error won't run but still the scripts imported by that script would run. Hmm...

sapphi-red · 2024-10-22T04:52:40Z

packages/vite/src/node/plugins/chunkImportMap.ts

+      config.root,
+      normalizePath(filename),
+    )
+    const assetsBase = getBaseInHTML(relativeUrlPath, config)


I guess there aren't any.

bhbs marked this pull request as ready for review April 29, 2024 06:59

bhbs mentioned this pull request May 2, 2024

feat: 🧪 chunkMap #15373

Draft

bhbs force-pushed the chunk-importmap branch from 1a0eaf5 to ef5d053 Compare September 19, 2024 13:58

feat: chunk importmap

9bed85b

bhbs force-pushed the chunk-importmap branch from ef5d053 to 9bed85b Compare September 19, 2024 14:04

sapphi-red self-requested a review October 16, 2024 10:44

sapphi-red added the p3-significant High priority enhancement (priority) label Oct 17, 2024

sapphi-red reviewed Oct 17, 2024

View reviewed changes

bhbs added 6 commits October 19, 2024 22:53

Merge branch 'main' into chunk-importmap

a0e94cc

docs: mv chunk importmap

bb63e50

refactor: remove redundant chunkName reference

eaca13c

refactor: use import.meta.resolve instead of homemade import map re…

5f898b3

…solver

refactor: use MagicString::replace instead of String::replace

553e503

refactor: mv replacement to before passing the filename to `toOutputF…

47ce953

…ilePathInJS`

sapphi-red reviewed Oct 22, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: chunk importmap #16552

feat: chunk importmap #16552

bhbs commented Apr 29, 2024 •

edited

Loading

stackblitz bot commented Apr 29, 2024

olivierbeaulieu commented Jul 12, 2024

Lgowen commented Aug 15, 2024

paolostyle commented Sep 11, 2024

C-Higgins commented Sep 18, 2024

juanespinola05 commented Sep 19, 2024

sapphi-red left a comment •

edited

Loading

sapphi-red Oct 17, 2024

blake-newman Oct 18, 2024

sapphi-red Oct 22, 2024

sapphi-red Oct 17, 2024

sapphi-red Oct 17, 2024

bhbs Oct 21, 2024

sapphi-red Oct 22, 2024

sapphi-red Oct 17, 2024

bhbs Oct 21, 2024

sapphi-red Oct 22, 2024

sapphi-red Oct 17, 2024

sapphi-red Oct 17, 2024

bhbs commented Oct 17, 2024

bhbs commented Oct 21, 2024

sapphi-red Oct 22, 2024

sapphi-red Oct 22, 2024

sapphi-red Oct 22, 2024

sapphi-red Oct 22, 2024

sapphi-red Oct 22, 2024

		@@ -519,6 +566,16 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
		}
		}


		### Chunk importmap

		Creating an import map for chunks helps prevent the issue of cascading cache invalidation. This import map features a list of stable file IDs linked to filenames with content-based hashes. When one chunk references another, it utilizes the file ID instead of the content-hashed filename. As a result, only the updated chunk needs cache invalidation in the browser, leaving intermediary chunks unchanged. This strategy enhances the cache hit rate following deployments.

	- Default: `false`
	- Default: `false`
	- Experimental

feat: chunk importmap #16552

Are you sure you want to change the base?

feat: chunk importmap #16552

Conversation

bhbs commented Apr 29, 2024 • edited Loading

Description

Implementation

Others

stackblitz bot commented Apr 29, 2024

olivierbeaulieu commented Jul 12, 2024

Lgowen commented Aug 15, 2024

paolostyle commented Sep 11, 2024

C-Higgins commented Sep 18, 2024

juanespinola05 commented Sep 19, 2024

sapphi-red left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bhbs commented Oct 17, 2024

bhbs commented Oct 21, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bhbs commented Apr 29, 2024 •

edited

Loading

sapphi-red left a comment •

edited

Loading