Vite2 plugins (4) – Advanced plugins

preface

The last article focused on the daily development of vite several advanced plug-ins, this article will talk about a few more commonly used advanced plug-ins

A,vite-plugin-theme

1.

This is a vite plugin for dynamically changing the theme color of an interface

• NPM: vite – plugin – theme
• Git: vite – plugin – theme

2. Install

yarn add vite-plugin-theme --dev
Copy the code

3. Configure the plug-in

Build/vite/plugin/theme. Ts:

/ * * * website theme colors switch Vite plugin * https://github.com/anncwb/vite-plugin-theme * /
import { viteThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme';
import { getThemeColors, generateColors } from '.. /.. /config/themeConfig';

export function configThemePlugin() {
  const colors = generateColors({
    mixDarken,
    mixLighten,
    tinycolor,
  });

  const plugin = viteThemePlugin({
    // Generate a number of color methods
    colorVariables: [...getThemeColors(), ...colors],
  });
  return plugin;
}
Copy the code

4. Configuration Vite

Build/vite/plugin/index. Ts:

// ...
import { configThemePlugin } from './theme';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
  // ...
  //vite-plugin-theme
  vitePlugins.push(configThemePlugin());

  return vitePlugins;
}
Copy the code

5. Modify the theme method

To change the theme later, just call this method.

/ SRC/theme index. Ts:

import { getThemeColors, ThemeMode, generateColors } from '.. /.. /build/config/themeConfig';

import { replaceStyleVariables } from 'vite-plugin-theme/es/client';
import { mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme/es/colorUtils';

export async function changeTheme(color: string, theme? : ThemeMode) {
  const colors = generateColors({
    mixDarken,
    mixLighten,
    tinycolor,
    color,
  });

  return await replaceStyleVariables({
    colorVariables: [...getThemeColors(color, theme), ...colors],
  });
}
Copy the code

Second, vite – plugin – imagemin

1.

Viet-plugin-imagemin: a vite plugin to compress image resources.

2. Configure the mirror

Package. Json:

Official recommendation: Use to install imagemin dependencies, as Imagemin may not be installed in China

"resolutions": {
  "bin-wrapper": "npm:bin-wrapper-china"
},
Copy the code

3. The installation

yarn add vite-plugin-imagemin --dev
Copy the code

4. Configure the plug-in

Build/vite/plugin/imagemin. Ts:

/ * * * used to compress the production environment of the output image resources * https://github.com/anncwb/vite-plugin-imagemin * /

import viteImagemin from 'vite-plugin-imagemin';

export function configImageminPlugin() {
  const plugin = viteImagemin({
    gifsicle: {
      optimizationLevel: 7.interlaced: false,},optipng: {
      optimizationLevel: 7,},mozjpeg: {
      quality: 8,},pngquant: {
      quality: [0.8.0.9].speed: 4,},svgo: {
      plugins: [{removeViewBox: false}, {removeEmptyAttrs: false,},],},});return plugin;
}
Copy the code

For detailed configuration information, see Options

5. Configuration Vite

Build/vite/plugin/index. Ts:

// ...
import { configImageminPlugin } from './imagemin';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
  // ...
  const {
    VITE_USE_IMAGEMIN: shouldUseImagemin
  } = viteEnv;
  // The production environment uses plug-ins
  if (isBuild) {
    // vite-plugin-imagemin
    shouldUseImagemin && vitePlugins.push(configImageminPlugin());
  }

  return vitePlugins;
}
Copy the code

Third, vite – plugin – pwa

1.

• Vite-plugin-pwa: Some technology integration with PWA.
• Service Worker- Reference link
• PWA – MDN

It doesn’t matter if you’re not sure what a PWA is. You can configure it directly. Application running on web pages is not affected.

2. Install

yarn add vite-plugin-pwa --dev
Copy the code

3. Configure the plug-in

Build/vite/plugin/pwa. Ts:

/ * * * vite pwa 0 configured plugin * https://github.com/antfu/vite-plugin-pwa * /

import { VitePWA } from 'vite-plugin-pwa';

export function configPwaConfig(env: ViteEnv) {
  const { VITE_USE_PWA: shouldUsePwa, VITE_GLOB_APP_TITLE: appTitle, VITE_GLOB_APP_SHORT_NAME: shortName } = env;

  if (shouldUsePwa) {
    // vite-plugin-pwa
    const pwaPlugin = VitePWA({
      manifest: {
        name: appTitle,
        short_name: shortName,
        icons: [{src: './resource/img/pwa-192x192.png'.sizes: '192x192'.type: 'image/png'}, {src: './resource/img/pwa-512x512.png'.sizes: '512x512'.type: 'image/png',},],},});return pwaPlugin;
  }
  return [];
}

Copy the code

4. Configuration Vite

Build/vite/plugin/index. Ts:

// ...
import { configPwaConfig } from './pwa';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
  // ...
  // The production environment uses plug-ins
  if (isBuild) {
    // ...
    // vite-plugin-pwa
    vitePlugins.push(configPwaConfig(viteEnv));
  }

  return vitePlugins;
}
Copy the code