Jeecg Boot实战：快速开发与常见问题避坑指南

项目初期的技术选型

去年接了个内部管理系统，客户预算不多，工期又紧，前后端都得快速出活。后端同事提议用 Jeecg Boot，说它代码生成器强，基础功能全，能省不少时间。我一开始有点犹豫，毕竟之前没碰过，但看他们 demo 跑得挺快，表单、列表、权限都有了，就想着试试吧——反正不行大不了重写前端。

结果一上手发现，Jeecg Boot 的前端是基于 Vue 2 + Ant Design Vue 的，虽然技术栈不算新，但文档还算齐全，社区也有点人。最关键的是，它的 online 表单配置真香，拖拽字段、联动规则、校验逻辑，基本不用写代码就能搭出一个 CRUD 页面。我们第一个模块三天就跑起来了，连后端接口都没手动写，全靠在线表单生成。

最大的坑：性能问题

但好景不长，等业务模块堆到十几个，页面一多，问题就来了。最头疼的是首页加载慢得离谱，F5 一下要等 8 秒多。我一开始以为是接口慢，打开 DevTools 一看，发现 main.js 打包后居然有 4.2MB！全是 Ant Design Vue 的组件全量引入，连 DatePicker 这种只在两个页面用的组件，也打包进了主 chunk。

更糟的是，有些动态表单页面，因为用了 Jeecg 自带的 JEditableTable（可编辑表格），数据量一大（比如 200 行 × 15 列），页面直接卡死，滚动都卡顿。我试过加虚拟滚动，但 JEditableTable 内部结构太复杂，改不动。

折腾了半天，发现根源在于 Jeecg 的默认模板为了“开箱即用”，把所有可能用到的组件都 import 了，还全局注册。这在小项目没问题，但中大型项目就是灾难。

核心代码就这几行

后来我决定动刀子。首先解决打包体积问题，改成按需引入 Ant Design Vue：

// babel.config.js
module.exports = {
  plugins: [
    ['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }, 'ant-design-vue']
  ]
}

然后把 main.js 里 import Antd from 'ant-design-vue' 和 Vue.use(Antd) 全删了，改成每个页面单独 import 需要的组件。比如登录页只用 Button 和 Form，那就：

// login.vue
import { Button, Form, FormItem, Input } from 'ant-design-vue'
export default {
  components: { AButton: Button, AForm: Form, AFormItem: FormItem, AInput: Input }
}

这一改，main.js 从 4.2MB 降到 1.8MB，首屏加载直接干到 3 秒内，亲测有效。

至于 JEditableTable 卡顿，我最后没动原组件，而是绕了个弯：对大数据量表格，强制分页，每页最多 50 条。同时在用户操作前加个 loading 提示，避免误操作。虽然不是最优解，但简单粗暴，客户也能接受。

踩坑提醒：这三点一定注意

• 别信“零代码”：Jeecg 的 online 表单确实快，但一旦需求超出模板（比如要加自定义校验、异步联动），就得手写 JS。而且生成的代码耦合度高，后期维护容易懵。建议只用于标准 CRUD，复杂逻辑尽早抽离成独立页面。
• 权限控制要小心：Jeecg 的前端权限是基于角色菜单的，但如果你的按钮级权限很细（比如“导出”按钮只给特定人），得自己扩展。我后来在 router.beforeEach 里加了额外判断，结合后端返回的 permission list，才搞定。
• 别升级太勤：有次我手贱把 jeecg-boot-starter 升了小版本，结果 API 响应格式变了，前端一堆 .data.xxx 报错。后来学乖了，锁定版本，除非有安全补丁，否则不动。

最终的解决方案

除了上面的优化，我还做了几件事：

一是把公共 API 封装成 service 层，而不是直接在组件里写 axios。比如：

// api/user.js
import request from '@/utils/request'

export function getUserList(params) {
  return request({
    url: '/sys/user/list',
    method: 'get',
    params
  })
}

// 在组件里
import { getUserList } from '@/api/user'

这样后期换接口地址或加统一处理（比如错误重试）就方便多了。

二是针对高频接口做了缓存。比如字典数据，用 Vuex 存起来，避免重复请求：

// store/modules/dict.js
const state = {
  dictCache: {}
}

const actions = {
  async getDict({ commit, state }, type) {
    if (state.dictCache[type]) return state.dictCache[type]
    const res = await getDictByType(type)
    commit('SET_DICT', { type, data: res })
    return res
  }
}

这些改动不大，但体验提升明显，特别是弱网环境下。

回顾与反思

整体来说，Jeecg Boot 在这个项目里算功过相抵。前期确实快，帮我们抢下了时间；后期性能和维护性问题也真实存在，但通过一些取舍和 hack，基本压住了。

做得好的地方：快速交付能力、基础权限模型、代码生成器（对简单模块）。还能优化的：前端架构太重，应该更早做按需加载；JEditableTable 这类组件需要替换或深度定制；最好引入 TypeScript，现在 JS 写大了容易出错。

说实话，如果现在重来，我可能会选 Vue 3 + Element Plus + 手写脚手架，虽然前期慢点，但长期更可控。不过话说回来，当时那个 deadline，Jeecg 确实救了急——没有完美的技术，只有合适时机的选择。

以上是我踩坑后的总结，希望对你有帮助。有更优的实现方式欢迎评论区交流，比如你怎么处理 Jeecg 的大数据表格？或者有没有人成功把它迁到 Vue 3？