vue3如何按需加载第三方组件库详解

前言

以element plus 为例，配置按需加载组件和样式。

环境

• vue3.0.5
• vite2.3.3

安装 element plus

完整引入

可以看出 element plus 的 js 和 css 文件大小和耗时都挺大。

按需加载

安装 vite-plugin-importer 插件

安装

在 官网中有 一栏，可以使用推荐的

其中，是 的集成，而 babel-plugin-import 可以按需加载组件和组件样式，故 vite-plugin-importer 亦能。

配置 vite.config.js

main.js

使用 vite-plugin-importer 按需加载组件和样式效果明显。

安装 vite-plugin-style-import

安装

element plus 官网中提供了按需加载的方式。

配置

vite.config.js

main.js

可以看出，vite-plugin-style-import 只按需加载组件样式。

总结

• vite-plugin-importer 可以按需加载组件和组件样式。
• vite-plugin-style-import 只能按需加载组件样式。
• 相比一次加载第三方组件库，按需加载更优秀。

到此这篇关于vue3如何按需加载第三方组件库的文章就介绍到这了,更多相关vue3按需加载组件库内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！