vconsole-helper/README.md

轻量级的 VConsole 初始化工具

# VConsole 工具



<p align="center">
  <img src="https://img.shields.io/npm/dw/vconsole-helper">
  <img src="https://img.shields.io/npm/unpacked-size/vconsole-helper">
  <img src="https://img.shields.io/npm/v/vconsole-helper">
  <img src="https://img.shields.io/npm/l/vconsole-helper">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

运行时工具。可用于初始化 `VConsole`。

## 如何使用

安装

```bash
pnpm add vconsole-helper -D
```

`main.ts` 中：

```ts
import { loadVConsole } from 'vconsole-helper';

loadVConsole();


// options 会传递给 new window.VConsole
// plugins 会通过下面方式注册 vConsole.addPlugin(plugin())
loadVConsole(options, plugins);
```

由于 `vconsole` 本身是调试工具，无需放到首包中，所以性能更佳的使用方法是使用外链：

```ts
const VCONSOLE_HELPER_SCRIPT = 'https://image-1251917893.file.myqcloud.com/igame/npm/vconsole-helper/index%400.0.4.prod.js';

function innerLoadVConsole() {
  if (!window.vConsoleHelper) return;

  const { genVConsole, V_CONSOLE_NO_DELAY = {} } = window.vConsoleHelper;
  if (!genVConsole) return;

  const isShowVConsole = getUrlPara('vconsole') || '';
  const noDelay = sessionStorage.getItem(V_CONSOLE_NO_DELAY.KEY);


  genVConsole({
    immediateShow: isShowVConsole === 'true'
      || isTestEnv()
      || noDelay === V_CONSOLE_NO_DELAY.VALUE,
    hide: false,
    asyncConfirmFunc: checkIsDevList,
    vConsoleConfig: getConfig('vConsole'),
  });
}


export function loadVConsoleFromExternal() {
  const isShowVConsole = getUrlPara('vconsole') || '';
  const isVConsoleDisable = !!getConfig('vConsole.disable');
  const hide = isShowVConsole === 'false' || !UserInfo.tipUid() || isVConsoleDisable;

  if (hide) return;

  loader(VCONSOLE_HELPER_SCRIPT, () => {
    innerLoadVConsole();
  });
}
```

优化效果，使用之后原文件大小减少`27.22KB`，`gzip`大小减少`10.78KB`。

<img src="https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2025/1/own_mike_168ce3e0fdc8c711c6.png">

<img src="https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2025/1/own_mike_ba73c1d8b6adfa6166.png">


## 更新日志

[点此查看](./CHANGELOG.md)