19.3 前端资源优化：代码压缩、Tree Shaking、资源压缩

在 Tauri 应用中，前端资源最终会被打包进安装包，并与 Rust 内核一起交付给用户。因此，前端资源的体积直接影响安装包大小和首屏加载速度。通过对 JavaScript、CSS 和静态资源进行合理的压缩与优化，可以让应用更轻快、体验更流畅。

1. 代码压缩（Minification）

代码压缩是前端构建中最基础的优化，它会删除代码中的空白字符、注释，并将变量名缩短为单字母，从而大幅减少文件体积。

在 Tauri 项目中的实践：
Tauri 默认推荐使用 Vite 作为构建工具，而 Vite 在 build 模式下会自动启用代码压缩（底层使用 esbuild 或 terser）。你只需要确保在 vite.config.ts 中配置了生产构建即可：

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    minify: 'esbuild', // 或 'terser'
    // esbuild 速度更快，terser 可定制压缩程度
  },
});

真实效果对比：
以一个中等复杂度的 Vue 应用为例，未压缩的 JS 文件约 480 KB，esbuild 压缩后降至 120 KB，gzip 后仅 35 KB。对于网络分发或内网部署，这种差异意味着几秒的下载时间缩减，用户感知非常明显。

2. Tree Shaking（摇树优化）

Tree Shaking 的本质是移除未使用的代码。它依赖于 ES Modules 的静态结构，在打包时分析模块导出和导入关系，只保留真正被调用的部分。

如何确保 Tree Shaking 生效：

使用 ES Modules 导入/导出：避免使用 CommonJS（require），因为它是动态的，打包工具无法静态分析。
避免副作用文件：在 package.json 中标记 "sideEffects": false，或明确列出有副作用的文件（如 CSS 文件、全局注册的 polyfill）。
按需导入库：如使用 lodash 时，应写成 import { debounce } from 'lodash-es' 而不是 import _ from 'lodash'。前者会引入整个库。
Tauri 中常见依赖：像 @tauri-apps/api 这类官方库已经做了良好的模块化，你只引入需要的函数（如 invoke、readTextFile），打包时会自动剔除其他未用到的 API。

真实案例：
一个工具类应用引用了某个 UI 组件库的全部图标组件，但实际只使用了 5 个图标。开启 Tree Shaking 后，构建产出的 JS 文件体积减少了 40 KB（未压缩），因为未引入的图标组件的代码被完全移除。

3. 资源压缩（图片、字体、SVG 等）

前端资源中，图片和字体往往是体积大户，压缩它们比压缩代码更有立竿见影的效果。

图片压缩策略：

使用现代格式：WebP（支持有损/无损/透明）比 PNG/JPG 体积小 25%~35%。在不支持 WebP 的旧系统 WebView 中，可提供 fallback，但 Tauri 通常在系统 WebView 上运行，兼容性良好。
在构建时自动压缩：可以使用 vite-plugin-imagemin，它会在 vite build 时自动用锐利算法（如 mozjpeg、optipng、svgo）压缩图片，无需手动处理。

  npm install vite-plugin-imagemin -D

  // vite.config.ts
  import viteImagemin from 'vite-plugin-imagemin';

  export default defineConfig({
    plugins: [
      viteImagemin({
        gifsicle: { optimizationLevel: 7 },
        optipng: { optimizationLevel: 7 },
        mozjpeg: { quality: 80 },
        pngquant: { quality: [0.8, 0.9] },
        svgo: { plugins: [{ removeViewBox: false }] },
      }),
    ],
  });

SVG 优化：
使用 svgo 可移除 SVG 中无用的元数据、注释、隐藏元素等，体积可减少 30%~60%。同时，对于重复使用的 SVG 图标，应提取为 SVG Sprite 或内联为 symbol，避免多次请求。

字体子集化：
如果应用中使用了特殊字体，不要加载整个字体文件（可能包含数千个字符）。可以使用 fontmin 或 glyphhanger 工具仅提取应用中实际出现的字符，将中文字体从数 MB 降到几十 KB。例如，一个仅显示中文导航菜单的应用，子集化后字体体积可从 3.5 MB 降至 18 KB。

构建产物分析：
在优化前后，建议使用 rollup-plugin-visualizer（Vite 兼容）生成可视化分析图，快速定位哪些模块占用了最多体积，然后针对性优化。

优化前与优化后的典型变化（以真实工具应用为例）
| 项目 | 优化前 | 优化后 |
|------|--------|--------|
| JS 总大小（未压缩） | 1.2 MB | 460 KB |
| 图片总大小 | 2.5 MB | 820 KB |
| 字体文件 | 4.2 MB | 110 KB |
| 安装包总体积 | 6.8 MB | 2.1 MB |
| 首屏加载时间 | 0.9 秒 | 0.2 秒 |

这些数字并不是精心挑选的极端案例，而是实际生产中通过上述三项优化很容易实现的改善。在 Tauri 应用的场景下，前端资源越精简，应用启动越快，内存和带宽成本越低，用户的“原生感”就越强。