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

2025-02-18
广东
本文字数：2241 字
阅读完需：约 7 分钟

近日，@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.jsimport { 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.jsconst 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 标签，一起参与开源贡献~

发布于: 刚刚阅读数: 4

OpenTiny社区

关注

OpenTiny 企业级web前端开发解决方案 2023-06-06 加入

官网：opentiny.design 我们是华为云的 OpenTiny 开源社区，会定期为大家分享一些团队内部成员的技术文章或华为云社区优质博文，涉及领域主要涵盖了前端、后台的技术等。

发布

暂无评论

创作场景

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

安装配置

安装

配置

温馨提示

如何使用

关于 ts 类型声明

新旧版本对比说明

关于 OpenTiny

OpenTiny社区

评论