忽略 Vaadin 23 中未使用组件的主题加载并避免网络负载

Question

我刚刚意识到我的 Vaadin Web 应用程序在 8Mb 的总体 javascript 网络加载占用空间中加载了至少 3mb 未使用的 JS 主题库。如何防止这种情况发生？

最突出的三个

• 1600kb Vaadin 图表@vaadin_charts_theme_lumo_vaadin-chart__js.js
• >340kb 瓦丁地图@vaadin_map_theme_lumo_vaadin-map__js.js
• >310kb vaadin 富文本编辑器@vaadin_rich-text-editor_theme_lumo_vaadin-rich-text-editor__js.js

Vite 可以排除这个问题吗？Vaadin 版本：（23.3.4非生产模式）

我没有使用任何商业组件，并尝试将它们从 pom.xml 中显式排除，并从 package.json 中删除它们，然后npm i再次开始

        <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin</artifactId>
        <exclusions>
            
            <exclusion>
                <groupId>com.vaadin.addon</groupId>
                <artifactId>vaadin-charts</artifactId>
            </exclusion>
            <exclusion>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-rich-text-editor-flow</artifactId>
            </exclusion>
            <exclusion>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-map-flow</artifactId>
            </exclusion> 
            <!-- [..] -->

Answer 1

在开发模式下，会加载很多额外的JS。您应该在生产模式下运行测试，在该模式下扫描应用程序以查找您实际使用的组件并创建优化的 JS 包。

开发时通常不需要阻止从 localhost 加载一些 MB 的 JS。