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 文件，你可以看到构建结果的详细分析报告。