vite2 經常使用插件篇（三）- 進階插件

今日

身爲中國人，恐怕沒有不知道的，今天是七夕節，屬於咱們本身的情人節！javascript

在讀這篇文章的朋友，若是你已經有了另外一半，那麼恭喜你，祝願大家度過一個浪漫舒適的七夕節。css

沒有的話，仍是好好學習，再去贏取你心目中的白富美吧~html

前言

咱們在上一篇文章主要講了vite平常開發的幾個基礎插件，這篇文章講下另外幾個經常使用的進階插件vue

1、`vite-plugin-windicss`

1.說明

在Vite上單獨使用Tailwind時，渲染速度很慢。java

vite-plugin-windicss比Tailwind快20到100倍。node

2.安裝

yarn add vite-plugin-windicss --dev
複製代碼

3.建立`Windicss`配置文件

（1）windicss的配置react

（2）tailwind的配置git

tailwind.config.ts：github

import lineClamp from 'windicss/plugin/line-clamp';
import colors from 'windicss/colors';

import { defineConfig } from 'vite-plugin-windicss';
import { primaryColor } from './build/config/themeConfig';

export default defineConfig({
  darkMode: 'class',
  plugins: [lineClamp, createEnterPlugin()],
  theme: {
    extend: {
      colors: {
        ...colors,
        primary: primaryColor,
      },
      screens: {
        sm: '576px',
        md: '768px',
        lg: '992px',
        xl: '1200px',
        '2xl': '1600px',
      },
    },
  },
});

/** * 用於元素顯示時的動畫 * @param maxOutput 輸出越大，生成的css體積越大 */
function createEnterPlugin(maxOutput = 10) {
  const createCss = (index: number, d = 'x') => {
    const upd = d.toUpperCase();
    return {
      [`*> .enter-${d}:nth-child(${index})`]: {
        transform: `translate${upd}(50px)`,
      },
      [`*> .-enter-${d}:nth-child(${index})`]: {
        transform: `translate${upd}(-50px)`,
      },
      [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
        'z-index': `${10 - index}`,
        opacity: '0',
        animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
        'animation-fill-mode': 'forwards',
        'animation-delay': `${(index * 1) / 10}s`,
      },
    };
  };
  const handler = ({ addBase }) => {
    const addRawCss = {};
    for (let index = 1; index < maxOutput; index++) {
      Object.assign(addRawCss, {
        ...createCss(index, 'x'),
        ...createCss(index, 'y'),
      });
    }
    addBase({
      ...addRawCss,
      [`@keyframes enter-x-animation`]: {
        to: {
          opacity: '1',
          transform: 'translateX(0)',
        },
      },
      [`@keyframes enter-y-animation`]: {
        to: {
          opacity: '1',
          transform: 'translateY(0)',
        },
      },
    });
  };
  return { handler };
}
複製代碼

3.建立配置文件

build/vite/plugin/windicss.ts：npm

import type { Plugin } from 'vite';

import windiCSS from 'vite-plugin-windicss';

export function configWindiCssPlugin(): Plugin[] {
  return windiCSS({
    safelist: 'no-select',
    preflight: {
      enableAll: true,
    },
  });
}
複製代碼

4.應用配置

build/vite/plugin/index.ts：

// ...
import { configWindiCssPlugin } from './windicss';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
  // ...
  // vite-plugin-windicss
  vitePlugins.push(configWindiCssPlugin());
  return vitePlugins;
}
複製代碼

5.導入樣式

src/main.ts：

// ...
import '@virtual/windi.css';

// ...
複製代碼

2、`vite-plugin-mock`

1.說明

vite-plugin-mock

根據我本身的試驗：

localEnabled用來控制mock開發環境是否啓動。
若是生產環境想要使用mock，只有prodEnabled爲true，injectCode注入指定代碼時纔會生效。

2.安裝 `mockjs` 和 `vite-plugin-mock`

# node version: >=12.0.0
# vite version: >=2.0.0

yarn add mockjs -S
yarn add vite-plugin-mock -D

# 或者:

npm install mockjs -S
npm install vite-plugin-mock -D
複製代碼

3.編寫Mock用例

這裏直接將根目錄下的mock目錄拷貝出來就行。

mock/_util.ts：裏面封裝的是數據請求結構類型。
mock\_createProductionServer.ts：用於配置生產環境動態Mock的js文件，文檔中有說。
其餘的：都是Mock用例。每個js、ts。都要默認導出一個MockMethod類型的數組。每一項MockMethod就是攔截的一個方法。MockMethod的response對應方法的return將會被Mock實例處理。也就是說，你能夠在return的對象中使用Mock規則

不過_createProductionServer.ts中使用了Glob 導入。

在根目錄下新建兩個文件:

mock/demo/user.ts

mock/_createMockServer.ts

user.ts:

import { MockMethod } from 'vite-plugin-mock';
export default [
  // mock userInfo
  {
    url: '/api/v1/userInfo',
    timeout: 200,
    method: 'get',
    response: ({ body }) => {
      console.log('body', body);
      return {
        code: 0,
        message: 'OK',
        data: {
          userName: 'admin',
          headThumb: 'http://xxx/avatars/profile.gif',
        },
      };
    },
  },
] as MockMethod[];
複製代碼

_createMockServer.ts：

經試驗，這個mock文件名稱最好這樣命名，不然會有不可預料的錯誤

import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';

const modules = import.meta.globEager('./**/*.ts');

const mockModules: any[] = [];
Object.keys(modules).forEach((key) => {
  if (key.includes('/_')) {
    return;
  }
  mockModules.push(...modules[key].default);
});

/** * 在生產環境中使用。 須要手動導入全部模塊 */
export function setupProdMockServer() {
  createProdMockServer(mockModules);
}
複製代碼

⚠️ 注意：此時 import.meta.globEager 可能會有類型錯誤提示:

修改 tsconfig.json 配置的 include 屬性就正常了：

"include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "mock/**/*.ts" //++ 新增
  ]
複製代碼

4.配置使用 vite-plugin-mock

build/vite/plugin/mock.ts：

import { viteMockServe } from 'vite-plugin-mock';

export function configMockPlugin(isBuild: boolean) {
  return viteMockServe({
    // eslint-disable-next-line no-useless-escape
    ignore: /^\_/,
    mockPath: 'mock',
    localEnabled: !isBuild,
    prodEnabled: isBuild,
    injectCode: ` import { setupProdMockServer } from '../mock/_createMockServer'; setupProdMockServer(); `,
  });
}
複製代碼

5.配置進Vite

build/vite/plugin/index.ts：

// ...
import { configMockPlugin } from './mock';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
  // ...
  const {
    VITE_USE_MOCK: shouldUseMock,
  } = viteEnv;
  // vite-plugin-mock
  shouldUseMock && vitePlugins.push(configMockPlugin(isBuild));

  return vitePlugins;
}
複製代碼

6. 測試 mock

在 src 目錄下新增：

api/user/index.ts

import http from '@/utils/http/index';
enum UserAPI {
  getUserInfo = '/api/v1/userInfo',
}

/** * 獲取用戶信息 */
export async function getUserInfo(): Promise<any> {
  return http.get({
    url: UserAPI.getUserInfo,
  });
}
複製代碼

src/views/demo/index.vue：

<template>
  <div>
    <div>demo</div>
  </div>
</template>

<script lang="ts"> import { defineComponent, onMounted, reactive } from 'vue'; import { getUserInfo as getUserInfoApi } from '@/api/user/index'; export default defineComponent({ setup() { // ------------------------------------------ reactive ------------------------------------------ const getUserInfo = async () => { try { const result = await getUserInfoApi(); if (result && result.code === 0 && result.data) { console.log(result.data); } } catch (error) { console.log('error', error); } }; onMounted(() => { getUserInfo(); }); return { userInfo, }; }, }); </script>

<style lang="scss">
</style>

複製代碼

終端效果以下：

說明 mock 是成功的

3、`vite-plugin-purge-icons`

1.說明

這個插件是可讓咱們很方便高效的使用Iconify中全部的圖標。

這裏要講的是Iconify各個版本插件的區別：

Vue3版Iconify插件：使用時須要安裝指定庫的圖標，而後靜態引用。每一次引用都會產生一次http請求。
PurgeIcons：將咱們所使用的Iconify圖標都已html的dom節點形式保存在html中，這樣咱們就能夠不發送http請求就可使用圖標了。
vite-plugin-purge-icons：就是Vite版的PurgeIcons。

2.安裝

yarn add @iconify/iconify
yarn add vite-plugin-purge-icons @iconify/json --dev
複製代碼

3.配置Vite

build/vite/plugin/index.ts：

// ...
import PurgeIcons from 'vite-plugin-purge-icons';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
  // ...
  // vite-plugin-purge-icons
  vitePlugins.push(PurgeIcons({
      /* PurgeIcons Options */
  }));

  // ...
  return vitePlugins;
}
複製代碼

4.`main`中導入

src/main.ts：

import { createApp } from 'vue'
import App from './App.vue'

// 導入 icons
import '@purge-icons/generated'

createApp(App).mount('#app')
複製代碼

6、`rollup-plugin-visualizer`

1.說明

rollup-plugin-visualizer：依賴分析插件。
cross-env：命令行配置環境變量

2.安裝visualizer

yarn add rollup-plugin-visualizer @types/rollup-plugin-visualizer --dev
複製代碼

3.配置插件

build/vite/plugin/visualizer.ts：

/** * 包文件體積分析 */
import visualizer from 'rollup-plugin-visualizer';
import { isReportMode } from '../../utils';
import type { Plugin } from 'vite';

export function configVisualizerConfig() {
  if (isReportMode()) {
    return visualizer({
      filename: './node_modules/.cache/visualizer/stats.html',
      open: true,
      gzipSize: true,
      brotliSize: true,
    }) as Plugin;
  }
  return [];
}
複製代碼

4.配置Vite

build/vite/plugin/index.ts：

// ...
import { configVisualizerConfig } from './visualizer';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
  // ...
  // rollup-plugin-visualizer
  vitePlugins.push(configVisualizerConfig());

  return vitePlugins;
}
複製代碼

5.安裝cross-env

yarn add cross-env --dev
複製代碼

6.添加腳本

package.json：

{
  // ...
  "scripts": {
    // ...
    "report": "cross-env REPORT=true npm run build"
    // ...
  }
  // ...
}
複製代碼

7. 執行腳本查看報告

npm run report
複製代碼

生成報告後會自動打開瀏覽器，就像下面這樣 👇🏻

很明顯能夠看出來哪些依賴包占用體積最大，接下來就能夠根據項目狀況來優化下項目體積啦~

vite2 經常使用插件篇（三）- 進階插件

今日

前言

1、vite-plugin-windicss

1.說明

2.安裝

3.建立Windicss配置文件

3.建立配置文件

4.應用配置

5.導入樣式

2、vite-plugin-mock

1.說明

2.安裝 mockjs 和 vite-plugin-mock

3.編寫Mock用例

4.配置使用 vite-plugin-mock

5.配置進Vite

6. 測試 mock

3、vite-plugin-purge-icons

1.說明

2.安裝

3.配置Vite

4.main中導入

6、rollup-plugin-visualizer

1.說明

2.安裝visualizer

3.配置插件

4.配置Vite

5.安裝cross-env

6.添加腳本

7. 執行腳本查看報告

1、`vite-plugin-windicss`

3.建立`Windicss`配置文件

2、`vite-plugin-mock`

2.安裝 `mockjs` 和 `vite-plugin-mock`

3、`vite-plugin-purge-icons`

4.`main`中導入

6、`rollup-plugin-visualizer`