<!-- Generated by SpecStory -->

# 增加 html 产物的 minify 功能 (2025-06-09 00:23:16)

_**User**_

增加对产物的 html 进行 minify 

---

_**Assistant**_

我来帮你为 Vite 构建产物添加 HTML minify 功能。我需要先查看一下当前的配置情况，然后添加相应的插件。

---

Read file: package.json

---

现在我来检查 web 应用的 package.json 文件，看看具体的依赖：

---

Read file: apps/web/package.json

---

现在我需要添加 HTML minify 功能。对于 Vite，我们可以使用 `vite-plugin-html` 或者 `rollup-plugin-html-minifier` 来实现 HTML 压缩。我选择使用 `vite-plugin-html`，因为它是专门为 Vite 设计的插件。

首先安装依赖：

---

```bash
cd /Users/innei/git/vibe-coding/photo-gallery-site && pnpm add -D vite-plugin-html
```

```
 ERR_PNPM_ADDING_TO_ROOT  Running this command will add the dependency to the wo
rkspace root, which might not be wha
t you want - if you really meant it, make it explicit by running this command ag
ain with the -w flag (or --workspace-root). If you don't want to see this warnin
g anymore, you may set the ignore-workspace-root-check setting to true. 
```

---

我需要在正确的工作空间添加依赖：

---

```bash
cd /Users/innei/git/vibe-coding/photo-gallery-site && pnpm add -D vite-plugin-html --filter @photo-gallery/web
```

```

innei in photo-gallery-site on  main [$] via  v22.15.0 on ☁️  innei@rss3.io at     c00d1b9 "feat(webgl-viewer): 
integrate Vite for build process and add TypeScript configuration"  by tukon479@gmail.com 

innei in photo-gallery-site on  main [$] via  v22.15.0 on ☁️  innei@rss3.io at     c00d1b9 "feat(webgl-viewer): 
integrate Vite for build process and add TypeScript configuration"  by tukon479@gmail.com 
at 22:51:04 ❯ cd /Users/innei/git/vibe-coding/photo-gallery-site && pnpm add -D vite-plugin-html --filter @photo-gal
lery/web
.                                        |  WARN  `node_modules` is present. Lockfile only installation will make it
 out-of-date
 WARN  4 deprecated subdependencies found: glob@7.2.3, inflight@1.0.6, mvdan-sh@0.10.1, path-match@1.2.4
Progress: resolved 1299, reused 0, downloaded 0, added 0, done
.                                        |  +37   -5 ++++-
. preinstall$ sh scripts/preinstall.sh
└─ Done in 12ms
. prepare$ simple-git-hooks
│ [INFO] Successfully set the pre-commit with command: pnpm exec lint-staged
│ [INFO] Successfully set all git hooks
└─ Done in 242ms
Done in 6.3s using pnpm v10.11.1

innei in photo-gallery-site on  main [$!] via  v22.15.0 on ☁️  innei@rss3.io at     c00d1b9 "feat(webgl-viewer):
 integrate Vite for build process and add TypeScript configuration"  by tukon479@gmail.com took 6s 
at 22:51:16 ❯
```

---

现在我来修改 vite.config.ts 文件，添加 HTML minify 功能：

---

```diff
  import { analyzer } from 'vite-bundle-analyzer'
  import { checker } from 'vite-plugin-checker'
+ import { createHtmlPlugin } from 'vite-plugin-html'
  import tsconfigPaths from 'vite-tsconfig-paths'
  
```

```diff
        siteUrl: siteConfig.url,
      }),
+     createHtmlPlugin({
+       minify: {
+         collapseWhitespace: true,
+         keepClosingSlash: true,
+         removeComments: true,
+         removeRedundantAttributes: true,
+         removeScriptTypeAttributes: true,
+         removeStyleLinkTypeAttributes: true,
+         useShortDoctype: true,
+         minifyCSS: true,
+         minifyJS: true,
+       },
+       inject: {
+         data: {
+           title: siteConfig.title,
+           description: siteConfig.description,
+         },
+       },
+     }),
      process.env.analyzer && analyzer(),
      {
```

---

现在让我检查一下配置是否正确，并查看是否有 HTML 模板文件需要更新：

---

Read file: apps/web/index.html

---

让我看看文件的剩余部分：

---

Read file: apps/web/index.html

---

现在我需要更新 HTML 模板，让它可以与 vite-plugin-html 的模板语法兼容。我需要将 `{{TITLE}}` 和 `{{DESCRIPTION}}` 替换为 vite-plugin-html 的模板语法：

---



---



---



---

现在我需要移除原有的自定义 HTML 转换插件，因为我们现在使用 vite-plugin-html 来处理模板变量替换：

---



---

现在让我测试一下构建是否正常工作：

---

```bash
cd /Users/innei/git/vibe-coding/photo-gallery-site && pnpm --filter @photo-gallery/web build
```

```

> @photo-gallery/web@0.0.1 build /Users/innei/git/vibe-coding/photo-gallery-site/apps/web
> tsx scripts/build.ts

ℹ 📚 Loaded 46 photos from manifest                                                                       22:52:23
vite v6.3.5 building for production...                                                                    22:52:23
ℹ ✅ Generated favicon: favicon-16x16.png (16x16)                                                         22:52:23
ℹ ✅ Generated favicon: favicon-32x32.png (32x32)                                                         22:52:23
ℹ ✅ Generated favicon: favicon-48x48.png (48x48)                                                         22:52:23
ℹ ✅ Generated favicon: apple-touch-icon.png (180x180)                                                    22:52:23
ℹ ✅ Generated favicon: android-chrome-192x192.png (192x192)                                              22:52:23
ℹ ✅ Generated favicon: android-chrome-512x512.png (512x512)                                              22:52:23
ℹ ✅ Generated main favicon: favicon.ico                                                                  22:52:23
ℹ ✅ Generated web manifest: site.webmanifest                                                             22:52:23
ℹ 🎨 All favicons generated successfully!                                                                 22:52:23
ℹ 📸 Found 4 latest photos                                                                                22:52:23
ℹ 📷 Added photo: DSCF3443 at position (850, 270) with rotation 10°                                       22:52:23
ℹ 📷 Added photo: DSCF3447 at position (760, 190) with rotation -8°                                       22:52:23
ℹ 📷 Added photo: DSCF3449 at position (670, 260) with rotation 5°                                        22:52:23
ℹ 📷 Added photo: DSCF3506 at position (580, 220) with rotation -12°                                      22:52:23
ℹ ✅ OG image generated: /Users/innei/git/vibe-coding/photo-gallery-site/apps/web/public/og-image-1749480743395.png
ℹ 🖼️  OG image generated: /og-image-1749480743395.png                                                     22:52:23
ℹ 🗑️  Deleted old OG image: og-image-1749400755969.png                                                    22:52:23
ℹ ✅ Cleaned up 1 old OG images                                                                           22:52:23
transforming (7) ../../node_modules/.pnpm/react@19.1.0/node_modules/react/jsx-runtime.js/*! 🌼 daisyUI 5.0.43 */

                                                                              22:52:24
✓ 1127 modules transformed.                                                                               22:52:26
dist/assets/texture.worker-ChtkyiaV.js           1.05 kB                                                  22:52:27
dist/index.html                                  6.69 kB │ gzip:   2.10 kB                                22:52:27
dist/assets/GeistVF.p2GUc8.woff2                56.80 kB                                                  22:52:27
dist/assets/index.D543_y.css                     8.91 kB │ gzip:   3.50 kB                                22:52:27
dist/assets/index.D0r30v.css                   147.00 kB │ gzip:  24.30 kB                                22:52:27
dist/assets/frame-DgaJPD6I.js                    0.61 kB │ gzip:   0.41 kB                                22:52:27
dist/assets/blurhash-ByNinx9h.js                 0.73 kB │ gzip:   0.46 kB                                22:52:27
dist/assets/webgl-preview-CCe5wWRs.js            1.29 kB │ gzip:   0.74 kB                                22:52:27
dist/assets/heic-converter-wNE5cl1f.js           1.46 kB │ gzip:   0.83 kB                                22:52:27
dist/assets/WebGLImageViewer-Bnt3zpMq.js        34.25 kB │ gzip:   9.64 kB                                22:52:27
dist/assets/resolve-elements-CwStzBNe.js        34.50 kB │ gzip:  12.69 kB                                22:52:27
dist/assets/usePhotoViewer-B6aOZzPd.js          42.91 kB │ gzip:  14.91 kB                                22:52:27
dist/assets/layout-C2V0Iwyu.js                  49.37 kB │ gzip:  18.03 kB                                22:52:27
dist/assets/framer-lazy-feature-BVGYvCto.js     64.52 kB │ gzip:  20.48 kB                                22:52:27
dist/assets/index-CM4QawDt.js                  104.57 kB │ gzip:  12.75 kB                                22:52:27
dist/assets/index-B9g65lFN.js                  154.15 kB │ gzip:  49.60 kB                                22:52:27
dist/vendor/1-0L15Yzmz.js                      187.60 kB │ gzip:  59.11 kB                                22:52:27
dist/assets/index-CV-8N7-P.js                  323.31 kB │ gzip: 106.96 kB                                22:52:27
dist/vendor/0-kq-hUwqs.js                    2,185.75 kB │ gzip: 547.25 kB                                22:52:27

 WARN                                                                                                     22:52:27
(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#outpu
t-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

✓ built in 3.99s                                                                                          22:52:27

```

---

太好了！构建成功了。现在让我检查一下生成的 HTML 文件是否已经被正确压缩：

---

Read file: apps/web/dist/index.html

---

完美！HTML 文件已经被成功压缩了。从输出可以看到：

1. **HTML 被完全压缩**：所有换行符、多余空格和注释都被移除了
2. **CSS 被内联压缩**：CSS 代码也被压缩，移除了所有不必要的空格
3. **模板变量被正确替换**：
   - `<%- title %>` 被替换为 "Innei's Photo Gallery"
   - `<%- description %>` 被替换为网站描述
4. **文件大小显著减小**：从构建日志可以看到 `index.html` 只有 6.69 kB，压缩后（gzip）只有 2.10 kB

让我们再次查看最终的 vite.config.ts 配置，确保一切配置正确：

---

Read file: apps/web/vite.config.ts

---

## 总结

我已经成功为你的照片画廊网站添加了 HTML minify 功能。具体的改动包括：

### 🔧 **配置更改**

1. **安装了 `vite-plugin-html` 插件**：
   ```bash
   pnpm add -D vite-plugin-html --filter @photo-gallery/web
   ```

2. **更新了 `vite.config.ts`**：
   - 导入了 `createHtmlPlugin` 
   - 配置了完整的 HTML 压缩选项：
     - `collapseWhitespace`: 移除多余空格
     - `removeComments`: 移除注释
     - `removeRedundantAttributes`: 移除冗余属性
     - `minifyCSS`: 压缩内联 CSS
     - `minifyJS`: 压缩内联 JavaScript
   - 移除了旧的自定义 HTML 转换插件

3. **更新了 HTML 模板语法**：
   - 将 `{{TITLE}}` 替换为 `<%- title %>`
   - 将 `{{DESCRIPTION}}` 替换为 `<%- description %>`

### ✅ **效果验证**

构建测试成功，HTML 文件已经被正确压缩：
- **文件大小**：6.69 kB（gzip 压缩后 2.10 kB）
- **压缩效果**：移除了所有换行符、注释和多余空格
- **功能正常**：模板变量正确替换，所有样式和脚本都被保留

现在你的项目在构建时会自动对 HTML 文件进行压缩，减少文件体积，提升网站加载速度！🚀

---

