Vaadin 8升级至20+后webpack开发服务器启动过慢问题咨询

问题成因 #

• 白名单配置错误失效：vaadin.whitelisted-packages配置要求使用点分隔包名，你填写的com/mycompany/myproject用了斜杠分隔导致配置不生效，Vaadin默认会从Spring Boot启动类所在的mycompany.server向上扫描整个mycompany包下的所有Java类，4000多个业务类的全量扫描消耗了大量时间，webpack需要等待扫描完成后才会开始前端资源编译。
• 前端构建无缓存：开发模式默认首次启动会全量下载npm依赖、全量编译所有前端组件，没有开启持久化缓存的情况下，每次启动都会重复执行全量编译流程。
• 依赖下载慢：如果没有配置国内npm镜像，首次下载node_modules依赖会消耗大量时间，甚至触发超时重试拉长启动耗时。

优化方案 #

• 修正白名单配置：把application.properties里的配置改为vaadin.whitelisted-packages=com.mycompany.myproject，如果你的Vaadin相关路由、组件也存放在mycompany包下，需要把对应的包也加到白名单中，如vaadin.whitelisted-packages=com.mycompany.myproject,mycompany.xxx，限制Vaadin的扫描范围，减少不必要的类扫描耗时。
• 开启前端构建持久化缓存：在application.properties中添加以下配置：

# 开启webpack持久化缓存，仅在前端资源变动时重新编译
vaadin.webpack.usePersistentCache=true
# 开启前端热部署，增量编译修改的资源
vaadin.frontend.hotdeploy=true

• 配置npm国内镜像：在项目根目录新建.npmrc文件，添加以下内容，加快npm依赖下载速度：

registry=https://registry.npmmirror.com/

• 升级构建工具：将Vaadin版本升级到23+，使用Vite替代webpack作为前端构建工具，开发模式启动速度可以提升10倍以上。
• 开发阶段精简配置：暂时移除ClientApplication类上的@PWA注解，关闭不需要的离线资源打包逻辑，减少打包工作量。

内容的提问来源于stack exchange，提问作者Helmer Barcos