Vaadin 23如何避免加载未使用组件主题JS以降低网络负载

核心思路 #

Vaadin 23.x默认使用Vite作为前端构建工具，你可以通过配置Vite的模块别名，将未使用的主题JS文件指向空模块，同时配合Java依赖排除，彻底移除这些冗余资源。

具体步骤 #

1. 排除Java端依赖
   确保pom.xml中显式排除未使用的组件依赖，避免Vaadin自动引入相关主题资源：

   <dependency>
       <groupId>com.vaadin</groupId>
       <artifactId>vaadin-core</artifactId>
       <exclusions>
           <exclusion>
               <groupId>com.vaadin</groupId>
               <artifactId>vaadin-charts-flow</artifactId>
           </exclusion>
           <exclusion>
               <groupId>com.vaadin</groupId>
               <artifactId>vaadin-map-flow</artifactId>
           </exclusion>
           <exclusion>
               <groupId>com.vaadin</groupId>
               <artifactId>vaadin-rich-text-editor-flow</artifactId>
           </exclusion>
       </exclusions>
   </dependency>
   

2. 配置Vite模块别名
   在项目根目录创建或修改vite.config.js，将目标主题JS文件映射到一个空模块：

   import { vaadin } from '@vaadin/vite-plugin';
   import path from 'path';
   
   export default {
     resolve: {
       alias: {
         '@vaadin/charts/theme/lumo/vaadin-chart.js': path.resolve(__dirname, 'empty.js'),
         '@vaadin/map/theme/lumo/vaadin-map.js': path.resolve(__dirname, 'empty.js'),
         '@vaadin/rich-text-editor/theme/lumo/vaadin-rich-text-editor.js': path.resolve(__dirname, 'empty.js')
       }
     },
     plugins: [vaadin()]
   };
   

3. 创建空模块文件
   在项目根目录新建empty.js文件，内容为空（仅作为占位符）：

   // 空模块，用于替换未使用的主题文件
   

4. 清理缓存并重新构建

   • 删除项目根目录下的node_modules文件夹和package-lock.json（或yarn.lock）
   • 执行npm install重新安装依赖
   • 删除target/frontend目录（Vaadin的前端缓存目录）
   • 重启应用

验证效果 #

启动应用后，打开浏览器开发者工具的网络面板，确认以下文件不再出现在加载列表中：

• @vaadin_charts_theme_lumo_vaadin-chart__js.js
• @vaadin_map_theme_lumo_vaadin-map__js.js
• @vaadin_rich-text-editor_theme_lumo_vaadin-rich-text-editor__js.js

注意事项 #

• 非生产模式下，Vaadin可能会保留一些预加载逻辑，清理缓存是关键步骤
• 如果你后续需要使用这些组件，只需移除对应的排除规则和Vite别名配置即可

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