^ 关注我，带你一起学GIS ^
最近在使用Element-Plus UI时，遇到一个问题，添加Tabs 组件后页面渲染非常缓慢，渲染时间达到5秒以上。前端请求的数据量本身并不大，接口返回数据的速度在几十毫秒之内，但是在页面渲染时总是要等待很久，于是寻求优化解决之道。
如果整个项目包很大，需要避免全量引入Element-Plus，这可以显著减少打包体积，有实践表明，按需引入可以使初始bundle大小减少50%以上。
首先配置Element组件按需导入，在vite.config.js文件中，配置plugins插件属性。
plugins: [
Components({
resolvers: [
// 自动导入 Element Plus 组件
ElementPlusResolver(),
// 自动注册图标组件
IconsResolver({
enabledCollections: ['ep']
})
],
dts: path.resolve(path.resolve(__dirname, '../../src'), 'types', 'components.d.ts')
})
],
下载unplugin-auto-import/vite插件，导入Components组件，在resolvers属性中添加ElementPlusResolver。
然后采用内容懒加载机制，配置Tab组件Tab-pane属性，在属性上添加lazy，该标签是一个布尔属性，用于设置是否延迟渲染，默认值为false。
配置代码如下所示
<el-tabs v-model="activeName" @tab-change="handleQuery">
<el-tab-pane lazy></el-tab-pane>
</el-tabs>
❝
GIS之路-开发示例数据下载，请在公众号后台回复：vector
全国信息化工程师－GIS 应用水平考试资料，请在公众号后台回复：GIS考试
❝
GIS之路 公众号已经接入了智能 助手，可以在对话框进行提问，也可以直接搜索历史文章进行查看。
都看到这了，不要忘记点赞、收藏 + 关注 哦 ！
本号不定时更新有关 GIS开发 相关内容，欢迎关注
