[READ-ONLY] Mirror of https://github.com/danielroe/cross-origin-storage. Load shared dependencies from Cross-Origin Storage (COS).
cross-origin-storage
experimental
nuxt
vite
vite-plugin
docs: add trying-it-out guide for both packages
author
Daniel Roe
date
(Jun 25, 2026, 5:44 PM +0100)
commit
e563ec37
e563ec37936ef7a73df0b327e77124bea6d85486
parent
c5323aef
c5323aefb56d7508f15dfb88fc574eb8b75f8854
+35
+18
packages/nuxt-cos/README.md
+18
packages/nuxt-cos/README.md
···
42
42
| --- | --- | --- | --- |
43
43
| `packages` | `Array<string \| RegExp>` | `[/^(?:vue$\|@vue\/)/]` | Packages to extract into COS chunks. |
44
44
45
+
## Trying it out
46
+
47
+
The module is a no-op in dev, so test a production build:
48
+
49
+
```bash
50
+
nuxt build && nuxt preview
51
+
```
52
+
53
+
What to look for:
54
+
55
+
- In `.output/public/_nuxt/`, the managed packages are emitted as content-hashed chunks (64-character hex filenames like `a1b2c3...e4f5.js`).
56
+
- View source on the rendered page: Nuxt's default entry `<script type="module">` is gone, replaced by a `<script id="cos-loader">` containing the loader and an inlined manifest.
57
+
- The page still hydrates and is interactive.
58
+
59
+
Without a COS-capable browser the loader fetches each chunk over the network (the fallback path), so this confirms the chunking and loader work, but not sharing.
60
+
61
+
To see real Cross-Origin Storage, install the [extension](https://chromewebstore.google.com/detail/cross-origin-storage/denpnpcgjgikjpoglpjefakmdcbmlgih), open the preview URL once (the chunks are fetched and stored), then reload or open another site shipping the same Vue version: in DevTools -> Network the hashed chunks are served from the shared store instead of refetched.
62
+
45
63
## Browser support
46
64
47
65
The [Cross-Origin Storage API](https://github.com/WICG/cross-origin-storage) is not yet in any browser. You can try it with the [Cross-Origin Storage browser extension](https://github.com/web-ai-community/cross-origin-storage-extension). Without it, chunks load over the network as usual, so your site keeps working; it just doesn't share them.
+17
packages/vite-plugin-cross-origin-storage/README.md
+17
packages/vite-plugin-cross-origin-storage/README.md
···
42
42
43
43
For a plain client build, the plugin injects the loader into `index.html` and removes the default entry `<script>` automatically.
44
44
45
+
## Trying it out
46
+
47
+
The plugin only runs at build time, so verify against a production build, not the dev server:
48
+
49
+
```bash
50
+
vite build && vite preview
51
+
```
52
+
53
+
Then check, in your `dist/<assetsDir>/`, that the managed packages are emitted as content-hashed chunks (a 64-character hex filename like `a1b2c3...e4f5.js`), and that opening the preview URL still loads the app normally. The chunks import each other by `cos1:<hash>` specifiers, resolved at runtime through an injected `<script type="importmap">`.
54
+
55
+
Without a COS-capable browser the loader fetches each chunk over the network, so this is the network-fallback path: it confirms the chunking and loader work, but not sharing.
56
+
57
+
To see real Cross-Origin Storage, install the [extension](https://chromewebstore.google.com/detail/cross-origin-storage/denpnpcgjgikjpoglpjefakmdcbmlgih), then:
58
+
59
+
1. Open the preview URL. On the first load the chunks are fetched and stored in COS (the extension's toolbar popup shows the activity).
60
+
2. Reload, or open a **different** site that ships the same dependency at the same version. In DevTools -> Network, the managed hashed `.js` chunks are no longer fetched; they come from the shared store instead.
61
+
45
62
## Options
46
63
47
64
| Option | Type | Default | Description |