« 最佳实践 路由、导航和 URL »
Elastic 文档 ›Kibana 指南 [8.14] ›开发者指南 ›最佳实践

保持 Kibana 快速

编辑

保持 Kibana 快速编辑

简而言之：尽可能延迟加载代码。每个人都喜欢响应迅速的用户界面和快速的应用程序，讨厌加载动画。无论用户是在本地还是在云端运行 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。这是浏览器在引导过程中加载的*唯一*工件。经验法则是尽可能保持其体积小。插件的其他延迟加载部分将作为单独的块出现在同一文件夹中，名称为 {number}.myplugin.js。如果您想调查插件包的组成，则需要使用 --profile 标志运行 @kbn/optimizer 以生成 webpack 统计文件。

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

许多开源工具允许您分析生成的统计文件

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