近日，@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標籤，一起參與開源貢獻~
