TinyVue自动导入插件重大升级，@opentiny/unplugin-tiny-vue1.0.0版本开启单组件包引入新模式

近日，@opentiny/unplugin-tiny-vue 发布了其重要的1.0.0版本更新，此次更新带来了全新的单组件包引入模式，显著提升了开发者的本地编译效率以及整个项目的构建速度。

在之前的版本中，开发者需要一次性加载整个TinyVue 库，这个不仅增加了初始时间，也使得项目构建过程变得相对缓慢。然而，随着新版本的发布，这一问题得到了有效的解决。通过引入单组件包模式，开发者现在可以根据实际需求选择性地加载所需的组件，从而极大地减少了不必要的资源消耗，提高了应用的响应速度和整体性能。

具体来说，当开发者使用 @opentiny/unplugin-tiny-vue 的新功能时，他们可以指定仅加载那些在当前项目中真正被使用的组件。这意味着，对于大型项目而言，这种按需加载的方式能够大幅度减少构建时间和内存占用，进而为开发者提供了更加流畅的工作体验。

接下来我们一起来看看如何使用~

安装配置

安装

npm i @opentiny/unplugin-tiny-vue -D

配置

单组件按需引入（推荐用法，可以加快编译和构建速度）

例如：TinyVueSingleResolver('TinyModal') => import TinyModal from '@opentiny/vue-modal'

Vite

// vite.config.js
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import AutoImport from'unplugin-auto-import/vite'
import { TinyVueSingleResolver } from '@opentiny/unplugin-tiny-vue'

exportdefault defineConfig({
plugins: [
    Components({
      resolvers: [TinyVueSingleResolver]
    }),
    AutoImport({
      resolvers: [TinyVueSingleResolver]
    })
  ]
})

 

Webpack

// webpack.config.js
const Components = require('unplugin-vue-components/webpack')
const AutoImport = require('unplugin-auto-import/webpack')
const { TinyVueSingleResolver } = require('@opentiny/unplugin-tiny-vue')

module.exports = {
plugins: [
    Components({
      resolvers: [TinyVueSingleResolver]
    }),
    AutoImport({
      resolvers: [TinyVueSingleResolver]
    })
  ]
}

温馨提示

因为 pnpm 工程的特点之一是：项目中显示引入的依赖需要提前在 package.json 中声明（防止幽灵依赖），所以在 pnpm 工程使用该插件时需要在 package.json 中声明项目用到的每一个 TinyVue 组件依赖（TinyVue 每个组件都是一个 npm 包）。依赖声明可以参考以下配置：

{
  "dependencies": {
    "@opentiny/vue-button": "~3.x.x",
    "@opentiny/vue-alert": "~3.x.x",
    "@opentiny/vue-input": "~3.x.x",
    ...
  }
}

如何使用

完成第一步配置后，开发者就可以在自己工程的页面模板使用 TinyVue 组件了（无需导入），具体的示例工程可以参考：https://github.com/opentiny/unplugin-tiny-vue/tree/main/example

示例代码如下：

<template>
  <div>
    <h2>函数式调用</h2>
    <div class="content">
      <span>弹窗模式：</span>
      <tiny-button @click="baseClick"> 基本提示框 </tiny-button>
      <tiny-button @click="successClick"> 成功提示框 </tiny-button>
      <tiny-button @click="confirmClick"> 确认提示框 </tiny-button>
    </div>

    <h2>标签式调用</h2>
    <div class="content">
      <tiny-modal v-model="show1" title="基本提示框" message="窗口内容1" show-footer></tiny-modal>
      <tiny-modal v-model="show2" title="基本提示框" message="窗口内容2" status="success" show-footer></tiny-modal>
      <tiny-button @click="show1 = true"> 打开弹窗1 </tiny-button>
      <tiny-button @click="show2 = true"> 打开弹窗2 </tiny-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const show1 = ref(false)
const show2 = ref(false)

function baseClick() {
const modal = TinyModal.alert('基本提示框', '标题')
setTimeout(() => modal.vm.close(), 3000)
}

function successClick() {
TinyModal.alert({ message: '成功提示框', status: 'success' })
}

function confirmClick() {
TinyModal.confirm('您确定要删除吗？').then((res) => {
  })
}
</script>

关于 ts 类型声明

使用此插件可以自动生成两个 ts 类型声明文件：auto-imports.d.ts、components.d.ts

只需要工程的 tsconfig.json 增加如下配置即可正常使用组件的类型声明：

"include": ["auto-imports.d.ts","components.d.ts","src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],

新旧版本对比说明

此次升级为开发者带来哪些提升呢？

接下来比较一下之前使用 TinyVueResolver 和新版本使用 TinyVueSingleResolver 的差别（只使用 TinyButton 和 TinyModal 组件）：

TinyVueResolver

本地编译：

• 222个请求
• 14.7MB项资源
• 完成用时：2.34秒

构建生产包：

TinyVueSingleResolver

本地编译：

• 31个请求
• 1.5MB 项资源
• 完成用时：340毫秒

构建生产包：

关于OpenTiny

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～
OpenTiny 官网：https://opentiny.design
OpenTiny 代码仓库：https://github.com/opentiny
TinyVue 源码：https://github.com/opentiny/tiny-vue
TinyEngine 源码： https://github.com/opentiny/tiny-engine
欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~ 如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~