Skip to content

Commit c17db8d

Browse files
bddjrbddjr
committed
html
1 parent fe1bad4 commit c17db8d

18 files changed

Lines changed: 135 additions & 282 deletions

‎README.md‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,30 +9,28 @@ Using [DecompressionStream](https://developer.mozilla.org/docs/Web/API/Decompres
99
## Setup
1010

1111
```
12-
npm i vite-plugin-singlefile-compression -D
12+
npm i vite-plugin-singlefile-compression@latest -D
1313
```
1414

15-
Then modify `vite.config.ts`, see [test/vite.config.ts](test/vite.config.ts)
15+
Then modify `vite.config.ts`, like [test/vite.config.ts](test/vite.config.ts)
1616

17-
```ts
18-
// Import singleFileCompression
19-
import singleFileCompression from 'vite-plugin-singlefile-compression'
17+
```diff
18+
+ import singleFileCompression from 'vite-plugin-singlefile-compression'
2019

2120
export default defineConfig({
2221
plugins: [
2322
vue(),
2423
vueDevTools(),
25-
// Add singleFileCompression
26-
singleFileCompression(),
24+
+ singleFileCompression(),
2725
],
2826
```
2927

30-
Then modify [src/router/index.ts](test/src/router/index.ts#L5)
28+
Then use hash history, like [src/router/index.ts](test/src/router/index.ts#L5)
3129

32-
```ts
30+
```diff
3331
const router = createRouter({
34-
// Use Hash History
35-
history: createWebHashHistory(),
32+
- history: createWebHistory(),
33+
+ history: createWebHashHistory(),
3634
```
3735

3836
## Options
@@ -128,20 +126,20 @@ Preview: https://bddjr.github.io/vite-plugin-singlefile-compression/
128126

129127
```
130128
vite v8.0.0 building client environment for production...
131-
✓ 41 modules transformed.
132-
rendering chunks (1)...
129+
✓ 35 modules transformed.
130+
133131
134132
vite-plugin-singlefile-compression 2.1.0 deflate-raw
135133
136134
file:///D:/code/js/vite-plugin-singlefile-compression/test/dist/index.html
137-
106.564 kB -> 47.458 kB
135+
139.123 kB -> 58.867 kB
138136
139137
Finish.
140138
141139
computing gzip size...
142-
dist/index.html 47.45 kB │ gzip: 41.35 kB
140+
dist/index.html 58.86 kB │ gzip: 51.34 kB
143141
144-
✓ built in 299ms
142+
✓ built in 276ms
145143
```
146144

147145
![](effect.jpg)

‎package-lock.json‎

Lines changed: 14 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
"@types/jsdom": ">=28.0.0",
6060
"@types/node": "^22.19.15",
6161
"esbuild": "^0.27.4",
62+
"marked": "^17.0.4",
6263
"rimraf": ">=6.1.3",
6364
"rolldown": ">=1.0.0-rc.9",
6465
"rolldown-plugin-dts": "^0.22.5",

‎test/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<!-- <link rel="icon" href="/src/assets/logo.svg"> -->
66
<link rel="icon" href="/favicon.ico">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8-
<title>Vite App</title>
8+
<title>vite-plugin-singlefile-compression</title>
99
</head>
1010
<body>
1111
<div id="app"></div>

‎test/src/App.vue‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ import HelloWorld from './components/HelloWorld.vue'
88
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
99

1010
<div class="wrapper">
11-
<HelloWorld msg="You did it!" />
11+
<HelloWorld msg="vite plugin singlefile compression" />
1212

1313
<nav>
14-
<RouterLink to="/">Home</RouterLink>
15-
<RouterLink to="/about">About</RouterLink>
14+
<RouterLink to="/">Setup</RouterLink>
15+
<RouterLink to="/license">License</RouterLink>
1616
</nav>
1717
</div>
1818
</header>
@@ -23,7 +23,7 @@ import HelloWorld from './components/HelloWorld.vue'
2323
<style scoped>
2424
header {
2525
line-height: 1.5;
26-
max-height: 100vh;
26+
/* max-height: 100vh; */
2727
}
2828
2929
.logo {
@@ -73,13 +73,14 @@ nav a:first-of-type {
7373
flex-wrap: wrap;
7474
}
7575
76-
nav {
77-
text-align: left;
78-
margin-left: -1rem;
79-
font-size: 1rem;
76+
}
8077
81-
padding: 1rem 0;
82-
margin-top: 1rem;
83-
}
78+
nav {
79+
text-align: left;
80+
margin-left: -1rem;
81+
font-size: 1rem;
82+
83+
padding: 1rem 0;
84+
margin-top: 1rem;
8485
}
8586
</style>

‎test/src/assets/main.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import './base.css';
22

33
#app {
4-
max-width: 1280px;
4+
max-width: 1024px;
55
margin: 0 auto;
66
padding: 2rem;
77
font-weight: normal;
@@ -24,12 +24,12 @@ a,
2424
@media (min-width: 1024px) {
2525
body {
2626
display: flex;
27-
place-items: center;
27+
/* place-items: center; */
2828
}
2929

3030
#app {
31-
display: grid;
31+
/* display: grid; */
3232
grid-template-columns: 1fr 1fr;
33-
padding: 0 2rem;
33+
padding: 2rem;
3434
}
35-
}
35+
}

‎test/src/components/HelloWorld.vue‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,31 @@ defineProps<{
88
<div class="greetings">
99
<h1 class="green">{{ msg }}</h1>
1010
<h3>
11-
You’ve successfully created a project with
12-
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
13-
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
11+
<p>
12+
Compress all assets and embeds them into <code>dist/index.html</code>, making it convenient to share as a single
13+
HTML file.
14+
</p>
15+
<p>
16+
The recipient can open it directly in the browser without manually unzipping the file.
17+
</p>
18+
<p>
19+
Using <a target="_blank"
20+
href="https://developer.mozilla.org/docs/Web/API/DecompressionStream">DecompressionStream</a> +
21+
<a target="_blank" href="https://www.npmjs.com/package/base128-ascii">base128-ascii</a>.
22+
</p>
23+
<p>
24+
Github: <a target="_blank"
25+
href="https://github.com/bddjr/vite-plugin-singlefile-compression">https://github.com/bddjr/vite-plugin-singlefile-compression</a>
26+
</p>
1427
</h3>
1528
</div>
1629
</template>
1730

1831
<style scoped>
32+
p {
33+
margin: 10px 0;
34+
}
35+
1936
h1 {
2037
font-weight: 500;
2138
font-size: 2.6rem;
@@ -33,6 +50,7 @@ h3 {
3350
}
3451
3552
@media (min-width: 1024px) {
53+
3654
.greetings h1,
3755
.greetings h3 {
3856
text-align: left;

‎test/src/components/TheWelcome.vue‎

Lines changed: 0 additions & 90 deletions
This file was deleted.

0 commit comments

Comments
 (0)