Vite按需引入自定義組件unplugin-vue-components

unplugin-vue-components插件可以在Vue文件中自動引入組件(包括項目自身的組件和各種組件庫中的組件);作者是Vite生態(tài)圈大名鼎鼎的Anthony Fu

使用此插件后粥烁,不需要手動編寫import { Button } from 'ant-design-vue'這樣的代碼了衍慎,插件會自動識別template中使用的自定義組件并自動注冊悄泥。

1. 安裝[unplugin-vue-components]

yarn install unplugin-vue-components

2. 在vite中使用

import Components from 'unplugin-vue-components/vite' // 按需加載自定義組件
import { ElementPlusResolver, AntDesignVueResolver} from 'unplugin-vue-components/resolvers'

export default defineConfig {
  // ...
  plugins: [
    // 按需引入
    Components({
      dts: true,
      dirs: ['src/components'], // 按需加載的文件夾
      resolvers: [
          ElementPlusResolver(),
          AntDesignVueResolver({
              // 參數(shù)配置可參考:https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/antdv.ts
              // 自動引入 ant-design/icons-vue中的圖標,需要安裝@ant-design/icons-vue
              resolveIcons: true,
            })
     ] // ElementPlus按需加載
    })
  ],
  // ...
}

tsconfig.json中配置

配置完成后,運行代碼纱兑,會在項目根目錄自動生成一個components.d.ts文件;
需要在tsconfig.json的includes配置中加入此文件

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

配置完成后,antd組件和項目中src/components目錄(可以通過dirs配置項修改目錄)下的組件都可以直接使用化借,無需寫import語句了.


image.png

打包結果對比

image.png
image.png

從這里可以看出引入插件后vendor.js文件由原來的959KB變?yōu)?71KB,css文件也有明顯的減小,效果非常明顯;

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末潜慎,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子蓖康,更是在濱河造成了極大的恐慌铐炫,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蒜焊,死亡現(xiàn)場離奇詭異倒信,居然都是意外死亡,警方通過查閱死者的電腦和手機泳梆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門鳖悠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人优妙,你說我怎么就攤上這事乘综。” “怎么了套硼?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵卡辰,是天一觀的道長。 經(jīng)常有香客問我,道長九妈,這世上最難降的妖魔是什么反砌? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮萌朱,結果婚禮上宴树,老公的妹妹穿的比我還像新娘。我一直安慰自己嚷兔,他們只是感情好森渐,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著冒晰,像睡著了一般同衣。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上壶运,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天耐齐,我揣著相機與錄音,去河邊找鬼蒋情。 笑死埠况,一個胖子當著我的面吹牛,可吹牛的內容都是我干的棵癣。 我是一名探鬼主播辕翰,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼狈谊!你這毒婦竟也來了喜命?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤河劝,失蹤者是張志新(化名)和其女友劉穎壁榕,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體赎瞎,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡牌里,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了务甥。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片牡辽。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖敞临,靈堂內的尸體忽然破棺而出催享,到底是詐尸還是另有隱情,我是刑警寧澤哟绊,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響票髓,放射性物質發(fā)生泄漏攀涵。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一洽沟、第九天 我趴在偏房一處隱蔽的房頂上張望以故。 院中可真熱鬧,春花似錦裆操、人聲如沸怒详。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽昆烁。三九已至,卻和暖如春缎岗,著一層夾襖步出監(jiān)牢的瞬間静尼,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工传泊, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留鼠渺,地道東北人。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓眷细,卻偏偏與公主長得像拦盹,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子溪椎,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內容