前言

以Element Plus 為例，配置按需載入元件和樣式。

環境

• vue3.0.5
• vite2.3.3

安裝 Element Plus

yarn add element-plus
# OR
npm install element-plus --save

完整引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

可以看出 Element Plus 的 js 和 css 檔案大小和耗時都挺大。

按需載入

安裝 vite-plugin-importer 外掛

安裝

yarn add vite-plugin-importer
# OR
npm install vite-plugin-importer --save

在 vite 官網中有 外掛 一欄，可以使用推薦的 社群外掛

其中，vite-plugin-importer 是 babel-plugin-import 的整合，而 babel-plugin-import 可以按需載入元件和元件樣式，故 vite-plugin-importer 亦能。

配置 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import usePluginImport from 'vite-plugin-importer'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),usePluginImport({
      libraryName: 'element-plus',customStyleName: (name) => {
        return `element-plus/lib/theme-chalk/${name}.css`;
      },}),],resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js'
    },},})

main.js

import { createApp } from 'vue'
import App from './App.vue'
import { ElButton,ElSelect } from 'element-plus';

const app = createApp(App)
app.component(ElButton.name,ElButton);
app.component(ElSelect.name,ElSelect);
app.mount('#app')

使用 vite-plugin-importer 按需載入元件和樣式效果明顯。

安裝 vite-plugin-style-import

安裝

yarn add vite-plugin-style-import -D
# OR
npm i vite-plugin-style-import -D

Element Plus 官網中提供了vite-plugin-style-import 按需載入的方式。

配置

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
imp程式設計客棧ort styleImport from 'vite-plugin-style-import';

// 程式設計客棧https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),styleImport({
      libs: [
        {
          libraryName: 'element-plus',esModule: true,ensureStyleFile: true,resolveStyle: (name) => {
            return `element-plus/lib/theme-chalk/${name}.css`;
          },resolveComponent: (name) => {
            return `element-plus/lib/${name}`;
          },resolve: {
    aliahttp://www.cppcns.coms: {
      'vue': 'vue/dist/vue.esm-bundler.js' 
    },})

main.js

import { createApp } from 'vue'
import App from './App.vue'
import {程式設計客棧 ElButton,ElButton);
app.compon程式設計客棧ent(ElSelect.name,ElSelect);
app.mount('#app')

可以看出，vite-plugin-style-import 只按需載入元件樣式。

總結

• vite-plugin-importer 可以按需載入元件和元件樣式。
• vite-plugin-style-import 只能按需載入元件樣式。
• 相比一次載入第三方元件庫，按需載入更優秀。

到此這篇關於vue3如何按需載入第三方元件庫的文章就介紹到這了,更多相關vue3按需載入元件庫內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！