`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;
}

复制代码

选项svgOptions的boolean类型不太清楚是干什么的。但是对象类型是控制svg过滤无用信息的选项。使用true是使用默认选项，false时不知道做什么的但是也没什么影响。

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;
}
复制代码