vite-plugin-purge-icons
vite-plugin-purge-icons 是一个 Vite 插件，用于按需加载 SVG 图标。类似于 TailwindCSS + PurgeCSS，但作用于图标。它会分析你的源代码或打包后的文件，提取出你使用的图标名称，然后将这些需要的图标数据（SVG）打包到你的代码中，减少了不必要的带宽和额外的未使用的图标，从而优化了加载性能。
该插件通过加入 PurgeIcons 对 SVG 的 Tree Shaking 支持来仅获取您使用的 SVG，这样可以减小构建体积，提高首次加载速度，并且不会让浏览器下载用不到的文件，因此可以提升使用网站的用户体验。
在项目中使用 vite-plugin-purge-icons，你只需要在模板中使用 SVG 名称，purge-icons 会在打包过程中自动识别你使用的 SVG，剔除掉没用的和重复的，并生成对应的映射表和类名，最终生成 bundle 后，只包含了所需要的 SVG。
<template>
<div>
<icon name="heart" />
</div>
</template>
vite-plugin-purge-icons 会查找你的代码并在生成的 Vue 单文件组件中引入所需的 SVG 文件。
vite-plugin-ejs
vite-plugin-ejs 是一个 Vite 插件，用于在构建过程中处理 EJS 模板文件。使用该插件，你可以在项目中编写 EJS 模板文件，并将其编译为 HTML 文件，从而使你的项目更加灵活和可维护。
使用 vite-plugin-ejs 插件也很简单，只需要在 vite.config.js 中配置即可。下面是一个示例：
// vite.config.js
import ejs from 'vite-plugin-ejs'
export default {
plugins: [
ejs({
compile: {
// EJS 模板选项
delimiter: '%',
escape: true,
debug: false
}
})
]
}
然后，你就可以在项目中使用 EJS 模板了。假设你有一个名为 page.ejs 的 EJS 模板文件，它的内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= title %></title>
</head>
<body>
<h1><%= heading %></h1>
<p><%= content %></p>
</body>
</html>
接下来，在你的 Vue 组件或其他 JavaScript 文件中，你可以引入这个模板，并通过传递变量来渲染页面，例如：
import pageTemplate from './page.ejs'
// 在 Vue 组件中
export default {
data() {
return {
pageTitle: 'Hello World',
pageHeading: 'Welcome to my site!',
pageContent: 'This is my page content.'
}
},
mounted() {
const html = pageTemplate({
title: this.pageTitle,
heading: this.pageHeading,
content: this.pageContent
})
console.log(html)
// 打印编译后的 HTML
}
}
以上代码会编译 page.ejs 模板文件，并将其渲染为 HTML 字符串，最终输出到控制台中。
需要注意的是，vite-plugin-ejs 插件默认会处理所有以 .ejs 结尾的文件，如果你想处理其他文件，可以通过配置 include 和 exclude 选项来指定。
unplugin-vue-define-options/vite
unplugin-vue-define-options 是一个 Vue CLI 和 Vite 插件，它的作用是在编译时向 Vue 组件中注入全局变量。使用该插件，开发者可以定义全局变量，而不必在每个组件中都导入和定义这些变量。
具体地说，unplugin-vue-define-options 插件会对 Vue 组件进行编译时处理，将其中所有的 process.env.VUE_APP_* 变量替换为实际的值，并向组件中注入一个名为 $options 的属性，该属性包含了所有定义的全局变量。通过这种方式，开发者就可以在 Vue 组件中访问全局变量，而无需在每个组件中重复定义它们。
下面是一个使用 unplugin-vue-define-options 插件的示例：
// vite.config.js
import vue from '@vitejs/plugin-vue'
import defineOptions from 'unplugin-vue-define-options/vite'
export default {
plugins: [
vue(),
defineOptions({
__DEV__: true,
API_BASE_URL: 'https://api.example.com',
VERSION: require('./package.json').version
})
]
}
在上述代码中，我们使用 defineOptions 插件向 Vue 组件中注入了三个全局变量：DEV、API_BASE_URL 和 VERSION。然后，在 Vue 组件中，我们可以通过访问 $options 属性来获取这些全局变量，例如：
export default {
mounted() {
if ($options.__DEV__) {
console.log('Development mode')
} else {
console.log('Production mode')
}
fetch($options.API_BASE_URL + '/users').then(...)
console.log('Version: ' + $options.VERSION)
}
}
需要注意的是，由于该插件使用了 Babel 来进行编译时注入操作，因此你可能需要在项目中添加相应的 Babel 插件和预设。具体配置方式可参考插件文档。
总之，unplugin-vue-define-options 插件可以让开发者在 Vue 组件中更加方便地使用全局变量，提高项目的可读性和可维护性。
