保持 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 工具允许您分析生成的统计信息文件