前言

本文將繼續介紹三個非常實用的 Vite 插件：vite-plugin-image-optimizer、vite-plugin-chunk-split 和 vite-plugin-robots。這些插件分別用于優化圖像、拆分代碼塊、管理 robots.txt 文件，幫助開發者更高效地構建和優化他們的前端應用。

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';

exportdefault 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';

exportdefault {
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。

vite build --mode=development