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按需加载组件库内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！