前言

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

1. vite-plugin-image-optimizer

描述

vite-plugin-image-optimizer 用于在構(gòu)建時優(yōu)化圖片資源。它利用 Sharp.js 和 SVGO 來處理 PNG、JPEG、GIF、TIFF、WEBP、AVIF 等格式的圖像，以及 SVG 文件。通過這個插件，開發(fā)者可以在構(gòu)建過程中自動優(yōu)化圖像，從而減少文件大小，提高網(wǎng)站加載速度!

使用方法

安裝依賴

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 用于優(yōu)化代碼塊拆分。它提供了三種拆分策略：default、all-in-one 和 unbundle，并支持自定義拆分配置。通過這個插件，開發(fā)者可以更靈活地控制代碼的打包方式，減少首屏加載時間，提高應(yīng)用性能。

使用方法

安裝插件:

npm i vite-plugin-chunk-split -D

在 Vite 配置中添加插件

import { chunkSplitPlugin } from'vite-plugin-chunk-split';

exportdefault {
plugins: [chunkSplitPlugin({
   // 拆分策略：'default'（默認(rèn)拆分）、'all-in-one'（合并為一個塊）、'unbundle'（不打包）
   strategy: 'default',
   // 自定義拆分規(guī)則，鍵為輸出文件名，值為匹配文件的正則表達(dá)式或字符串?dāng)?shù)組
   customSplitting: {
     'vendor': [/node_modules/],
     'app': [/src\/main/],
   },
 })],
};

自定義打包的結(jié)果

選擇合適的策略以避免過多的 HTTP 請求或過大的單一文件。

3. vite-plugin-robots

描述

vite-plugin-robots 用于在生產(chǎn)和開發(fā)構(gòu)建時生成 robots.txt 文件。用于告訴搜索引擎爬蟲哪些頁面可以被爬取，哪些頁面不可以。這個插件可以幫助開發(fā)者自動管理 robots.txt 文件，確保在不同環(huán)境（生產(chǎn)和開發(fā)）下使用正確的配置。

使用方法

安裝插件：

npm install -D vite-plugin-robots

在 Vite 配置中添加插件：

import { robots } from 'vite-plugin-robots';
import { defineConfig } from 'vite';

export default defineConfig({
 plugins: [robots()],
});

打包生成 robots.txt 文件：

在項目根目錄創(chuàng)建 .robots.prod.txt 和 .robots.dev.txt 文件。

這里官網(wǎng)給的名字是錯的～，請用上面的名稱

.robots.prod.txt：

User-agent: *
Allow: /

.robots.dev.txt：

User-agent: *
Disallow: /

構(gòu)建時自動復(fù)制：

• vite build 會使用 .robots.prod.txt。
• vite build --mode=development 會使用 .robots.dev.txt。

vite build --mode=development