@squoosh-kit/vite-plugin 0.2.6 → 0.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -18
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -46,6 +46,8 @@ That's it! The plugin will:
|
|
|
46
46
|
3. Set necessary CORS headers for cross-origin embedder policy
|
|
47
47
|
4. Exclude heavy dependencies from optimization
|
|
48
48
|
|
|
49
|
+
Worker mode then loads those assets from `/squoosh-kit` automatically. You only need to pass `assetPath` if you serve them from a different URL.
|
|
50
|
+
|
|
49
51
|
## What the Plugin Does
|
|
50
52
|
|
|
51
53
|
### Asset Copying
|
|
@@ -64,7 +66,7 @@ The plugin:
|
|
|
64
66
|
|
|
65
67
|
- Sets correct MIME type (`application/wasm`) for `.wasm` files
|
|
66
68
|
- Configures CORS headers:
|
|
67
|
-
- `Cross-Origin-Embedder-Policy:
|
|
69
|
+
- `Cross-Origin-Embedder-Policy: credentialless`
|
|
68
70
|
- `Cross-Origin-Opener-Policy: same-origin`
|
|
69
71
|
- Ensures WASM files are treated as assets
|
|
70
72
|
- Handles WASM file paths correctly in both development and production
|
|
@@ -79,23 +81,24 @@ In development mode, the plugin:
|
|
|
79
81
|
|
|
80
82
|
## Usage Example
|
|
81
83
|
|
|
82
|
-
After setting up the plugin,
|
|
84
|
+
After setting up the plugin, worker mode uses `/squoosh-kit` by default:
|
|
83
85
|
|
|
84
86
|
```typescript
|
|
85
|
-
import {
|
|
86
|
-
|
|
87
|
-
// Create encoder and resizer with worker mode
|
|
88
|
-
const encoder = createWebpEncoder('worker', {
|
|
89
|
-
assetPath: '/squoosh-kit/',
|
|
90
|
-
});
|
|
87
|
+
import { webp, resize } from '@squoosh-kit/core';
|
|
91
88
|
|
|
92
|
-
const
|
|
93
|
-
|
|
94
|
-
});
|
|
89
|
+
const encoder = webp.createWebpEncoder('worker');
|
|
90
|
+
const resizer = resize.createResizer('worker');
|
|
95
91
|
|
|
96
|
-
// Use them
|
|
97
|
-
const webpData = await encoder(imageData, { quality: 80 });
|
|
98
92
|
const resizedImage = await resizer(imageData, { width: 800 });
|
|
93
|
+
const webpData = await encoder(resizedImage, { quality: 80 });
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
Override `assetPath` only if you serve the copied assets from a different public URL:
|
|
97
|
+
|
|
98
|
+
```typescript
|
|
99
|
+
const encoder = webp.createWebpEncoder('worker', {
|
|
100
|
+
assetPath: '/custom-assets/squoosh-kit',
|
|
101
|
+
});
|
|
99
102
|
```
|
|
100
103
|
|
|
101
104
|
## API Reference
|
|
@@ -157,11 +160,13 @@ In production, they're available at `/squoosh-kit/`.
|
|
|
157
160
|
|
|
158
161
|
## Configuration
|
|
159
162
|
|
|
160
|
-
The plugin
|
|
163
|
+
The plugin copies assets to `public/squoosh-kit/`. Worker mode loads from `/squoosh-kit` by default.
|
|
161
164
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
+
Override the public URL only when needed:
|
|
166
|
+
|
|
167
|
+
```typescript
|
|
168
|
+
createWebpEncoder('worker', { assetPath: '/custom-assets/squoosh-kit' });
|
|
169
|
+
```
|
|
165
170
|
|
|
166
171
|
## Troubleshooting
|
|
167
172
|
|
|
@@ -178,7 +183,7 @@ bun add @squoosh-kit/webp @squoosh-kit/resize
|
|
|
178
183
|
Check that:
|
|
179
184
|
|
|
180
185
|
1. The plugin is configured before other plugins
|
|
181
|
-
2.
|
|
186
|
+
2. Worker assets are reachable at `/squoosh-kit/` (or the `assetPath` you passed)
|
|
182
187
|
3. Your server headers allow CORS (plugin should set these automatically)
|
|
183
188
|
|
|
184
189
|
### Build fails with "dist not found"
|
package/package.json
CHANGED