open-index/open-npm huggingface dataset:
npm package: @plugin-light/vite-plugin-transform-async-component
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-transform-async-component">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-transform-async-component">   <img src="https://img.shields.i
Author: wadezhan
Latest version: 1.0.0

# 异步组件转换

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-transform-async-component">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-transform-async-component">
  <img src="https://img.shields.io/npm/v/@plugin-light/vite-plugin-transform-async-component">
  <img src="https://img.shields.io/npm/l/@plugin-light/vite-plugin-transform-async-component">
  <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>

        
使用语法糖 `/* @async */` 包裹 vue 组件引用，会自动转换为 `defineAsyncComponent` 异步组件。

## 如何使用

安装

```bash
pnpm add @plugin-light/vite-plugin-transform-async-component -D
```

在 `vite.config.ts` 中添加如下设置：


```ts
import { defineConfig } from 'vite';
import { transformAsyncComponentsPlugin } from '@plugin-light/vite-plugin-transform-async-component';

export default defineConfig({
  plugins: [
    transformAsyncComponentsPlugin(),
  ],
});
```

## 示例

```vue
<script>
/* @async */
import ComponentA from './index-a.vue';
import ComponentB from './index-b.vue';
/* @endasync */
</script>
```