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 &