正在加载

保持 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 预先构建并作为程序包工件分发。这意味着我们不再需要将 optimizer 包含在 Kibana 的可分发版本中。每个插件工件都包含运行该插件所需的所有插件依赖项,但通过 @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 工具允许您分析生成的统计信息文件

© . All rights reserved.