elementui很卡
优化 Element UI 性能的方法
减少按需引入组件
避免全量引入 Element UI，使用 babel-plugin-component 按需加载。修改 babel.config.js 配置：
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]启用生产环境模式
开发环境下 Vue 会启用警告和调试工具，打包时确保使用生产模式。在 webpack 配置中设置：
new VueLoaderPlugin({
productionMode: process.env.NODE_ENV === 'production'
})组件懒加载
对非首屏组件使用异步加载，通过 () => import() 语法拆分代码块：
const Dialog = () => import('element-ui/lib/dialog');禁用非必要动画
部分组件如 Message、Loading 的动画可能影响性能，可通过全局配置关闭：
ELEMENT.animation = false;表格组件优化
大数据量表格启用虚拟滚动或分页：
<el-table :data="tableData" :row-key="id" use-virtual>
<el-table-column prop="name" label="名称" />
</el-table>样式定制精简
避免引入完整 CSS，通过 SCSS 变量覆盖只编译需要的样式：
@import "~element-ui/packages/theme-chalk/src/index";
$--color-primary: #409EFF;升级到 Element Plus
考虑迁移至基于 Vue 3 的 Element Plus 版本，性能提升显著。安装命令：
npm install element-plus排查卡顿的具体场景
开发工具检测
使用 Chrome Performance 工具录制操作过程，分析耗时长的脚本执行和渲染事件。
组件级性能分析
通过 Vue Devtools 检查组件的更新时间，对高频更新组件使用 v-once 或计算属性缓存。
依赖项体积检查
运行 webpack-bundle-analyzer 分析打包结果，确认 Element UI 占比是否异常。
服务端渲染兼容性
SSR 场景下禁用客户端特有功能，如 ResizeObserver，可通过环境变量判断：
if (process.server) {
delete window.ResizeObserver;
}
