@son426/vite-image 0.3.1 → 0.3.2
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 +32 -0
- package/package.json +12 -5
package/README.md
CHANGED
|
@@ -2,6 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
**The Next.js `<Image />` experience, now in Vite.**
|
|
4
4
|
|
|
5
|
+
[](https://vite-image.web.app)
|
|
6
|
+
[](https://www.npmjs.com/package/@son426/vite-image)
|
|
7
|
+
|
|
5
8
|
- **Bring the power of Next.js's automatic image optimization to your Vite projects.**
|
|
6
9
|
- **Dedicated to the Vite + React ecosystem.**
|
|
7
10
|
|
|
@@ -17,6 +20,35 @@ Simply add the plugin to your config, and start using the `<Image />` component
|
|
|
17
20
|
|
|
18
21
|
---
|
|
19
22
|
|
|
23
|
+
## At a glance
|
|
24
|
+
|
|
25
|
+
> `hero.jpg` (2.4 MB) → 3 responsive WebP images (42–148 KB) + inline blur placeholder (820 B). **94% smaller, zero config.**
|
|
26
|
+
|
|
27
|
+
```diff
|
|
28
|
+
// vite.config.ts
|
|
29
|
+
export default defineConfig({
|
|
30
|
+
plugins: [
|
|
31
|
+
+ viteImage(),
|
|
32
|
+
],
|
|
33
|
+
})
|
|
34
|
+
|
|
35
|
+
// Hero.tsx
|
|
36
|
+
- import hero from "./assets/hero.jpg"
|
|
37
|
+
+ import hero from "./assets/hero.jpg?vite-image"
|
|
38
|
+
|
|
39
|
+
- <img src={hero} alt="Hero" />
|
|
40
|
+
+ <Image src={hero} alt="Hero" placeholder="blur" />
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
| | `<img>` | `<Image>` |
|
|
44
|
+
|---|---|---|
|
|
45
|
+
| **Size** | 2.4 MB | 148 KB **(94% ↓)** |
|
|
46
|
+
| **Responsive** | Single size | 640w / 1024w / 1920w |
|
|
47
|
+
| **Placeholder** | Blank | Blur LQIP (instant) |
|
|
48
|
+
| **CLS** | 0.24 | 0 |
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
20
52
|
## 🚀 Quick Look
|
|
21
53
|
|
|
22
54
|
Add it to `vite.config.ts`, and use it like this:
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@son426/vite-image",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.2",
|
|
4
4
|
"description": "A Vite plugin and React component for optimized images with LQIP support using vite-imagetools",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -29,6 +29,11 @@
|
|
|
29
29
|
"README.md",
|
|
30
30
|
"LICENSE"
|
|
31
31
|
],
|
|
32
|
+
"scripts": {
|
|
33
|
+
"build": "tsup",
|
|
34
|
+
"dev": "tsup --watch",
|
|
35
|
+
"prepublishOnly": "pnpm run build"
|
|
36
|
+
},
|
|
32
37
|
"keywords": [
|
|
33
38
|
"vite",
|
|
34
39
|
"vite-plugin",
|
|
@@ -71,8 +76,10 @@
|
|
|
71
76
|
"publishConfig": {
|
|
72
77
|
"access": "public"
|
|
73
78
|
},
|
|
74
|
-
"
|
|
75
|
-
"
|
|
76
|
-
|
|
79
|
+
"pnpm": {
|
|
80
|
+
"onlyBuiltDependencies": [
|
|
81
|
+
"esbuild",
|
|
82
|
+
"sharp"
|
|
83
|
+
]
|
|
77
84
|
}
|
|
78
|
-
}
|
|
85
|
+
}
|