Add a comment explaining why we're not loading async components throu…

…gh index file

x-pack/plugins/security/public/ui_api/components.tsx

@@ -10,6 +10,14 @@ import React from 'react';
 
 import type { CoreStart } from 'src/core/public';
 
+/**
+ * We're importing specific files here instead of passing them
+ * through the index file. It helps to keep the bundle size low.
+ *
+ * Importing async components through the index file increases the bundle size.
+ * It happens because the bundle starts to also include all the sync dependencies
+ * available through the index file.
+ */
 import { getChangePasswordComponent } from '../account_management/change_password/change_password_async';
 import { getPersonalInfoComponent } from '../account_management/personal_info/personal_info_async';
 import { LazyWrapper } from './lazy_wrapper';