前言
前面几篇文章已经陆续介绍了好多可以提高开发效率的插件，本文将继续介绍三个非常实用的 Vite 插件：vite-plugin-image-optimizer、vite-plugin-chunk-split 和 vite-plugin-robots。这些插件分别用于优化图像、拆分代码块、管理 robots.txt 文件，帮助开发者更高效地构建和优化他们的前端应用。
往期精彩推荐
- 优雅，太优雅了，NestJS 🔥 实在是太优雅了！🚀🚀🚀
- 🚀🚀 🚀 太棒了，有了它，终于不用翻阅屎山💩代码了！
- 什么❓你还在用 vue-devtools，快来试试 vite-plugin-vue-devtools ❤️ ，更加丝滑🛹，更加全能！🚀🚀
- 更多精彩文章欢迎关注我的公众号：萌萌哒草头将军
正文
1. vite-plugin-image-optimizer
描述
vite-plugin-image-optimizer 用于在构建时优化图片资源。它利用 Sharp.js 和 SVGO 来处理 PNG、JPEG、GIF、TIFF、WEBP、AVIF 等格式的图像，以及 SVG 文件。通过这个插件，开发者可以在构建过程中自动优化图像，从而减少文件大小，提高网站加载速度!
使用方法
安装依赖
npm install vite-plugin-image-optimizer --save-dev
npm install sharp --save-dev
npm install svgo --save-dev
在 Vite 配置中添加插件：
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
import { defineConfig } from 'vite';
export default defineConfig(() => {
return {
plugins: [
ViteImageOptimizer({
png: { quality: 80 },
jpeg: { quality: 75 },
svg: { multipass: true },
}),
],
};
});
2. vite-plugin-chunk-split
描述
vite-plugin-chunk-split 用于优化代码块拆分。它提供了三种拆分策略：default、all-in-one 和 unbundle，并支持自定义拆分配置。通过这个插件，开发者可以更灵活地控制代码的打包方式，减少首屏加载时间，提高应用性能。
使用方法
安装插件:
npm i vite-plugin-chunk-split -D
在 Vite 配置中添加插件
import { chunkSplitPlugin } from 'vite-plugin-chunk-split';
export default {
plugins: [chunkSplitPlugin({
// 拆分策略：'default'（默认拆分）、'all-in-one'（合并为一个块）、'unbundle'（不打包）
strategy: 'default',
// 自定义拆分规则，键为输出文件名，值为匹配文件的正则表达式或字符串数组
customSplitting: {
'vendor': [/node_modules/],
'app': [/src\/main/],
},
})],
};
选择合适的策略以避免过多的 HTTP 请求或过大的单一文件。
3. vite-plugin-robots
描述
vite-plugin-robots 用于在生产和开发构建时生成 robots.txt 文件。用于告诉搜索引擎爬虫哪些页面可以被爬取，哪些页面不可以。这个插件可以帮助开发者自动管理 robots.txt 文件，确保在不同环境（生产和开发）下使用正确的配置。
使用方法
安装插件：
npm install -D vite-plugin-robots
在 Vite 配置中添加插件：
import { robots } from 'vite-plugin-robots';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [robots()],
});
打包生成 robots.txt 文件：
在项目根目录创建 .robots.prod.txt 和 .robots.dev.txt 文件。
这里官网给的名字是错的～，请用上面的名称
.robots.prod.txt：
User-agent: *
Allow: /
.robots.dev.txt：
User-agent: *
Disallow: /
构建时自动复制：
vite build会使用.robots.prod.txt。vite build --mode=development会使用.robots.dev.txt。
最后
今天的分享就这些了，感谢大家的阅读，如果文章中存在错误的地方欢迎指正！
