vite2常用插件篇（二）- 优化插件
上一篇文章vite2 常用插件篇（一）- 基础插件主要讲了vite插件集成的准备和几个基础插件，这篇文章讲下另外几个常用的基础插件
一、vite-plugin-html
1.说明
npm: vite-plugin-html
git: vite-plugin-html
原文：
一个为index.html提供minify和基于EJS模板功能的Vite插件。
- minify：压缩
index.html代码。 - EJS：给
index.html提供访问变量的能力。
详情看配置和使用。
另外这个插件可以在 在 index.html 中增加 EJS 标签，例如：
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%- title %></title>
<%- injectScript %>
</head>
其中 title 和 injectScript 就是可以注入的数据
2.安装
yarn add vite-plugin-html --dev
3.创建配置文件
build/vite/plugin/html.ts
import type { Plugin } from 'vite';
import html from 'vite-plugin-html';
import { GLOB_CONFIG_FILE_NAME } from '../../constant';
import pkg from '../../../package.json';
export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
const { VITE_GLOB_APP_TITLE: appTitle, VITE_PUBLIC_PATH: publicPath = './' } = env;
const path = publicPath.endsWith('/') ? publicPath : `${publicPath}/`;
const getAppConfigSrc = () => `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`;
const htmlPlugin: Plugin[] = html({
minify: isBuild,
inject: {
// Inject data into ejs template
injectData: {
title: appTitle,
},
// Embed the generated app.config.js file
tags: isBuild
? [
{
tag: 'script',
attrs: {
src: getAppConfigSrc(),
},
},
]
: [],
},
});
return htmlPlugin;
}
4.配置Vite插件
build/vite/plugin/index.ts
// ...
import { configHtmlPlugin } from './html';
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
// ...
// vite-plugin-html
vitePlugins.push(configHtmlPlugin(viteEnv, isBuild));
// ...
}
二、vite-plugin-svg-icon
1.说明
npm： vite-plugin-svg-icons
git： vite-plugin-svg-icons
当我们遇到首屏需要性能优化时，比如有很多http请求场景下，用这个插件就不会再产生http请求来渲染出svg图片。
怎么做到的呢？
使用该插件时，插件会自动将所有svg图片加载到HTML中。并且每一个svg将会被过滤去无用的信息数据。让svg达到最小的值。之后使用svg图片就只需要操作DOM即可，而不需要发送http请求。
当使用该插件的时候，指定好存放svg的文件夹。再按照指定的方式去访问svg图片。
2.安装
yarn add vite-plugin-svg-icons --dev
3.创建配置
build/vite/plugin/svgSprite.ts
import SvgIconsPlugin from 'vite-plugin-svg-icons';
import path from 'path';
export function configSvgIconsPlugin(isBuild: boolean) {
const svgIconsPlugin = SvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
svgoOptions: isBuild,
// default
symbolId: 'icon-[dir]-[name]',
});
return svgIconsPlugin;
}
4.用于配置
build/vite/plugin/index.ts
// ...
import { configSvgIconsPlugin } from './svgSprite';
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
// ...
// vite-plugin-svg-icons
vitePlugins.push(configSvgIconsPlugin(isBuild));
// ...
return vitePlugins;
}
5.main导入
src/main.ts：
// ...
import 'vite-plugin-svg-icons/register';
// ...
6.创建Svg组件
src/components/Icon/src/SvgIcon.vue
这里有一个样式，是全局上下文注入的
<template>
<svg :class="svgClass" v-bind="$attrs" :style="{ color: color }">
<use :xlink:href="iconName" />
</svg>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
export default defineComponent({
props: {
name: {
type: String,
required: true,
},
color: {
type: String,
default: '',
},
},
setup(props) {
const iconName = computed(() => `#icon-${props.name}`);
const svgClass = computed(() => {
if (props.name) {
return `svg-icon icon-${props.name}`;
}
return 'svg-icon';
});
return {
iconName,
svgClass,
};
},
});
</script>
<style lang="scss">
.svg-icon {
width: 1em;
height: 1em;
vertical-align: middle;
fill: currentColor;
}
</style>
三、vite-plugin-style-import
1.说明
npm: vite-plugin-style-import
git: vite-plugin-style-import
该插件可按需导入组件库样式，由于 vite 本身已按需导入了组件库，然后目前 element-plus 按需加载使用的插件方式不太优雅，其实就仅仅样式不是按需导入的，因此只需按需导入样式即可。
2.安装
yarn add vite-plugin-style-import --dev
3.配置插件
build/vite/plugin/styleImport.ts：
import styleImport from 'vite-plugin-style-import';
export function configStyleImportPlugin(isBuild: boolean) {
if (!isBuild) return [];
const styleImportPlugin = styleImport({
libs: [
// 按需加载 element-plus
{
libraryName: 'element-plus',
esModule: true,
ensureStyleFile: true,
resolveStyle: (name) => {
const cssName: string = name.slice(3);
return `element-plus/packages/theme-chalk/src/${cssName}.scss`;
},
resolveComponent: name => `element-plus/lib/${name}`,
},
],
});
return styleImportPlugin;
}
4.配置Vite
build/vite/plugin/index.ts：
// ...
import { configStyleImportPlugin } from './styleImport';
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
// ...
// vite-plugin-style-import
vitePlugins.push(configStyleImportPlugin(isBuild));
return vitePlugins;
}
四、vite-plugin-compression
1.说明
vite-plugin-compress的增强版，压缩用的。
npm: vite-plugin-compression
git: vite-plugin-compression
2.安装
yarn add vite-plugin-compression --dev
3.配置插件
build/vite/plugin/compress.ts：
import type { Plugin } from 'vite';
import compressPlugin from 'vite-plugin-compression';
export function configCompressPlugin(
compress: 'gzip' | 'brotli' | 'none' = 'none',
deleteOriginFile = false,
): Plugin | Plugin[] {
const compressList = compress.split(',');
const plugins: Plugin[] = [];
if (compressList.includes('gzip')) {
plugins.push(compressPlugin({
ext: '.gz',
deleteOriginFile,
}));
}
if (compressList.includes('brotli')) {
plugins.push(compressPlugin({
ext: '.br',
algorithm: 'brotliCompress',
deleteOriginFile,
}));
}
return plugins;
}
4.配置Vite
build/vite/plugin/index.ts：
// ...
import { configCompressPlugin } from './compress';
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
// ...
const {
VITE_BUILD_COMPRESS: compressType,
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: shouldBuildCompressDeleteFile,
} = viteEnv;
// 生产环境使用插件
if (isBuild) {
// ...
// rollup-plugin-gzip
vitePlugins.push(configCompressPlugin(compressType, shouldBuildCompressDeleteFile));
}
return vitePlugins;
}
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！