体积瘦身！TinyVue 打包调整与按需加载实践

你有没有这样的经历——项目刚启动时打包体积只有几百KB，轻轻松松上线。因为功能越来越多，组件库像吃货一样疯狂吞体积。突然有一天 npm run build 的输出让你血压飙升："这玩意儿怎么比我还胖？"

别慌。今天咱们就来聊聊怎么给 TinyVue 做“减肥手术”，让它从“重量级选手”变成“轻量级冠军”。

先看看问题出在哪

TinyVue 是一个同时支持 Vue 和 Vue 的公司级组件库。组件丰富是好事，但如果你把整个组件库一股脑儿全引进来打包体积就会像过年吃饺子一样——一发不可收拾。

完整引入的方式：

import { Button,Input,Grid,Tree,Modal,DatePicker。... } from '@opentiny/vue'

看起来很方便，但你可能只用了其中5个组件，却把50多个组件的代码都塞进了产物包。这就像你只想吃一根薯条，却把整桶全买了——钱包很受伤。

至于方案一，自动导入——懒人的福音

If you hate manual imports,auto‑import is your best friend.

1. 安装插件这方面，

npm install @opentiny/unplugin-tiny-vue unplugin-auto-import unplugin-vue-components -D

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import TinyVue from '@opentiny/unplugin-tiny-vue/vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins:。}),Components({
resolvers:,}),],})

这样配置之后你在模板中直接写  、 就行，不需要手动 import，插件会自动帮你搞定。更妙的是只引入你用到的组件，没有用到的连打包机会都没有——tree‑shaking 的最佳拍档。

方案二这方面，按需加载插件——精准裁剪

TinyVue 还提供专门的按需加载插件 ：

1. 安装的观点是。

npm install @opentiny/vue-vite-import -D

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import TinyVueImport from '@opentiny/vue-vite-import'
export default defineConfig({
plugins: ),],})

注意那个 customStyle 参数——TinyVue 同时支持 PC端、移动端和移动优先三种模式。如果你的项目是 PC端，设为 'pc' 就只会加载 PC端样式，其它被摇掉。 按理说，

再看方案三，TINY_MODE 配置——釜底抽薪

This cuts logic layer too.

• TINY_MODE 环境变量设置:

// vite.config.js
export default defineConfig({
define这方面，{
'process.env': {
TINY_MODE: 'pc',},}。})

• TINY_MODE 环境变量设置:
javascript // webpack.config.js module.exports = { plugins: } The above ensures that any conditional branches checking for mobile mode are stripped during build time—truly a “截肢” approach.

方案四这方面，单组件引入——手动控刀

• 如果不想用插件，也可以手动单组件引入。虽然麻烦一点，但效果一样出色。
• 至于示例，只引入 Button 组件。
• 再看预览代码，import TinyButton from "@opentiny/vue-button";import "@opentiny/vue-button/me";export default { components:{ TinyButton },};老实说，

  ---

  ​ 至于**小结**。
  • *只引入需要的模块*: 自动导入最省心、手动最精准；按需插件可进一步裁剪，TINY_MODE + customStyle 双管齐下去除移动端代码；单文件引用极致精确，
  • *合理管理依赖*: pnpm 下须提高 opentiny 包或显式声明依赖；版本号优先使用 `~` 而非 `^`。
  • *实际效果*: 在典型中大型项目中。从 ~2 MB+ 降至 ~600 KB 左右，明显提高首屏速度。

  ---

  ​

  🎯 后记打包膨胀往往是我们自己把整个自助餐厅搬回家，而不是 TinyVue 自己加糖。不过，先检查自己的引用方式，再走上瘦身之路吧！