How to load third-party component libraries on demand in Vue3

Preface

Take Element Plus as an example to configure on-demand loading of components and styles.

environment

vue3.0.5
vite2.3.3

Installing Element Plus

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

Complete introduction

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')

It can be seen that the js and css files of Element Plus are quite large in size and time-consuming.

Load on demand

Install the vite-plugin-importer plugin

Install

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

There is a plugin column on the Vite official website, where you can use recommended community plugins

Among them, vite-plugin-importer is an integration of babel-plugin-import, and babel-plugin-import can load components and component styles on demand, so vite-plugin-importer can also do so.

Configure 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')

Using vite-plugin-importer to load components and styles on demand has obvious effects.

Install vite-plugin-style-import

Install

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

The Element Plus official website provides the vite-plugin-style-import on-demand loading method.

Configuration

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import 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: {
    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')

As you can see, vite-plugin-style-import only loads component styles on demand.

Summarize

vite-plugin-importer can load components and component styles on demand.
vite-plugin-style-import can only load component styles on demand.
Compared to loading third-party component libraries once, loading on demand is better.

This is the end of this article about how Vue3 loads third-party component libraries on demand. For more relevant Vue3 on-demand component library loading content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Vue.js's mobile component library mint-ui implements infinite scrolling to load more methods
Teach you to build a Vue component library that loads on demand (summary)
How to replace the Vue component library with on-demand loading

<<: Introduction to the use and difference between in and exists in MySQL

>>: Solution to forgetting the password of the pagoda panel in Linux 3.X/4.x/5.x