第5章 Vite高级功能(二）

6 缓存和持久化

Vite 使用缓存来加速开发服务器的启动和模块热替换（HMR）。你可以配置缓存选项来优化构建性能。

6.1 配置缓存目录

你可以通过 cacheDir 选项指定缓存目录：

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  cacheDir: '.vite-cache' // 自定义缓存目录
})

7 压缩与最小化

Vite 使用 esbuild 进行代码压缩和最小化，可以显著减少构建输出的体积。

7.1 启用压缩

默认情况下，Vite 在生产模式下会启用代码压缩。你可以通过 build.minify 选项来控制压缩行为：

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    minify: 'esbuild' // 使用 esbuild 进行压缩
  }
})

7.2 配置压缩选项

你可以通过 esbuild 选项来自定义压缩行为：

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  esbuild: {
    minify: true, // 启用代码压缩
    minifyWhitespace: true, // 压缩空白字符
    minifyIdentifiers: true, // 压缩标识符
    minifySyntax: true // 压缩语法
  }
})

8 生产环境优化

在生产环境中，除了压缩代码外，还有其他一些优化手段可以提升应用性能。

8.1 移除调试信息

你可以使用 define 选项在生产环境中移除调试信息：

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    __DEBUG__: false // 设置调试标识
  }
})

在代码中使用这个标识来控制调试信息：

if (__DEBUG__) {
  console.log('Debug info')
}

8.2 配置环境变量

你可以通过环境变量来控制生产环境中的行为：

# .env.production
VITE_API_URL=https://api.example.com

在代码中使用环境变量：

const apiUrl = import.meta.env.VITE_API_URL
fetch(apiUrl + '/data')
  .then(response => response.json())
  .then(data => console.log(data))

9 静态资源优化

优化静态资源（如图像、字体、CSS）可以显著提升应用的加载性能。

9.1 压缩图像

你可以使用插件来压缩图像文件：

npm install vite-plugin-imagemin --save-dev

// vite.config.js
import { defineConfig } from 'vite'
import viteImagemin from 'vite-plugin-imagemin'

export default defineConfig({
  plugins: [
    viteImagemin({
      gifsicle: {
        optimizationLevel: 7,
        interlaced: false
      },
      optipng: {
        optimizationLevel: 7
      },
      mozjpeg: {
        quality: 20
      },
      pngquant: {
        quality: [0.65, 0.9],
        speed: 4
      },
      svgo: {
        plugins: [
          {
            removeViewBox: false
          },
          {
            removeEmptyAttrs: false
          }
        ]
      }
    })
  ]
})

9.2 合并和压缩 CSS

你可以通过 css 选项来配置 CSS 处理行为：

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        require('cssnano')({
          preset: 'default'
        })
      ]
    }
  }
})

9.3 使用 HTTP/2

HTTP/2 支持多路复用，可以显著提高静态资源的加载速度。你可以使用支持 HTTP/2 的静态文件服务器来部署你的应用。

10 分析构建结果

分析构建结果可以帮助你找到优化的机会，减少包的体积和依赖的数量。

10.1 使用分析插件

你可以使用 rollup-plugin-visualizer 插件来生成构建结果的可视化报告：

npm install rollup-plugin-visualizer --save-dev

// vite.config.js
import { defineConfig } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  build: {
    rollupOptions: {
      plugins: [
        visualizer({
          filename: './dist/stats.html'
        })
      ]
    }
  }
})

10.2 生成包分析报告

构建项目后，打开生成的 stats.html 文件，你可以看到构建结果的详细分析报告。