New

The executive guide to generative AI

Read more
About usPartnersSupport|Login
« 最佳实践 路由、导航和 URL »
Elastic 文档 ›Kibana 指南 [8.17] ›开发人员指南 ›最佳实践

保持 Kibana 快速

编辑

保持 Kibana 快速

编辑

简而言之：尽可能延迟加载代码。每个人都喜欢响应迅速的 UI 和快速的应用程序，讨厌加载指示器。无论用户是在本地还是在云端运行 Kibana，无论他们的硬件和环境如何，都应该获得最佳体验。

应用程序的感知速度主要有两个方面：加载时间和对用户操作的响应速度。当用户访问任何页面时，Kibana 会加载并引导 所有插件。这意味着每个新应用程序都会影响整体的加载性能，因为插件代码会被急切地加载，以初始化插件并为依赖插件提供插件 API。

然而，通常没有必要一次性加载并初始化整个插件代码。插件可以继续在 Kibana 引导时加载涵盖 API 功能的代码，但在挂载应用程序页面或管理部分时，按需延迟加载 UI 相关代码。尽可能优先延迟导入 UI 根组件（例如，在 mount 处理程序中）。即使它们的大小可能看起来微不足道，它们也可能使用一些重量级的库，这些库也将从初始插件捆绑包中删除，从而显著减小其大小。

import type { Plugin, CoreSetup, AppMountParameters } from '@kbn/core/public';
export class MyPlugin implements Plugin<MyPluginSetup> {
  setup(core: CoreSetup, plugins: SetupDeps) {
    core.application.register({
      id: 'app',
      title: 'My app',
      async mount(params: AppMountParameters) {
        const { mountApp } = await import('./app/mount_app');
        return mountApp(await core.getStartServices(), params);
      },
    });
    plugins.management.sections.section.kibana.registerApp({
      id: 'app',
      title: 'My app',
      order: 1,
      async mount(params) {
        const { mountManagementSection } = await import('./app/mount_management_section');
        return mountManagementSection(coreSetup, params);
      },
    });
    return {
      doSomething() {},
    };
  }
}

了解插件捆绑包大小

编辑

Kibana 平台插件使用 @kbn/optimizer 预先构建，并作为软件包工件分发。这意味着我们不再需要在 Kibana 的可分发版本中包含 optimizer。每个插件工件都包含运行该插件所需的所有插件依赖项，除了通过 @kbn/ui-shared-deps-npm 和 @kbn/ui-shared-deps-src 在插件捆绑包之间共享的一些有状态依赖项。这意味着插件工件往往比传统平台中的更大。要了解当前插件工件的大小，请运行 @kbn/optimizer 并

node scripts/build_kibana_platform_plugins.js --dist --profile --focus=my_plugin

并检查插件文件夹的 target 子文件夹中的输出

ls -lh plugins/my_plugin/target/public/
# output
# an async chunk loaded on demand
... 262K 0.plugin.js
# eagerly loaded chunk
... 50K  my_plugin.plugin.js

你可能会看到至少一个 js 捆绑包 - my_plugin.plugin.js。这是 Kibana 在浏览器中引导期间加载的唯一工件。经验法则是使其大小尽可能小。插件的其他延迟加载部分将以单独的块的形式存在于同一文件夹下，名称为 {number}.myplugin.js。如果你想调查插件捆绑包由什么组成，你需要使用 --profile 标志运行 @kbn/optimizer，以生成一个 webpack 统计文件。

node scripts/build_kibana_platform_plugins.js --dist --no-examples --profile

许多 OSS 工具允许你分析生成的统计文件

« 最佳实践 路由、导航和 URL »

On this page

Was this helpful?
Feedback