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

发布于 2023-02-12 16:36:59

我刚刚意识到我的 Vaadin Web 应用程序从 8Mb 的整体 javascript 网络加载足迹中加载了至少 3mb 的未使用的 JS 主题库。 如何预防?

三个最突出

  • 1600kb vaadin 图表@vaadin_charts_theme_lumo_vaadin-chart__js.js
  • >340kb vaadin地图@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> 
            <!-- [..] -->

查看更多

1楼回答 2023-02-05

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

在开发过程中,通常不需要阻止从本地主机加载一些 MB 的 JS。

请登录后再发布答案,点击登录