[Security Solution] Reduce initial bundle size #78992

oatkiller · 2020-09-30T16:56:03Z

Summary

Load the redux store factory and initial state factory lazily
Combine certain dynamic imports to reduce total async bundle size (this works because shared dependencies between async chunks are not being de-duped by Webpack.)
Add explicit types in some areas.

Here is a screenshot of the webpack analyse UI with the stats.json (dist version) of our plugin as it is in master with the only change being that all dynamic imports had a webpackChunkName magic comment added:

Here is a screenshot of the same UI with the stats.json (dist version) or our plugin as it is in this PR.

Note that today the resolver chunks are only used in tests.

screenshots

The app still loads.

For maintainers

This was checked for breaking API changes and was labeled appropriately

oatkiller · 2020-09-30T18:04:21Z

x-pack/plugins/security_solution/public/app/index.tsx

 import { SecurityApp } from './app';
-import { AppFrontendLibs } from '../common/lib/lib';
-
-interface RenderAppProps extends AppFrontendLibs, AppMountParameters {


I moved this to x-pack/plugins/security_solution/public/app/types.ts. This change isn't really necessary.

oatkiller · 2020-09-30T18:04:35Z

x-pack/plugins/security_solution/public/app/index.tsx

@@ -27,7 +17,7 @@ export const renderApp = ({
  services,
  store,
  SubPluginRoutes,
-}: RenderAppProps) => {
+}: RenderAppProps): (() => void) => {


Adding explicit types for readability.

oatkiller · 2020-09-30T18:05:23Z

x-pack/plugins/security_solution/public/plugin.tsx

 import { ConfigureEndpointPackagePolicy } from './management/pages/policy/view/ingest_manager_integration/configure_package_policy';

-import { State, createStore, createInitialState } from './common/store';


These are now loaded dynamically via x-pack/plugins/security_solution/public/lazy_plugin_dependencies.tsx

oatkiller · 2020-09-30T18:10:19Z

x-pack/plugins/security_solution/public/plugin.tsx

-      import('./app'),
-      import('./common/lib/compose/kibana_compose'),
-    ]);
+  private async downloadAssets(): Promise<{


downloadAssets downloadSubPlugins and buildStore are all needed if and only if a user has interacted with on of the registered apps. They all pull their dynamic dependencies from x-pack/plugins/security_solution/public/lazy_plugin_dependencies.tsx now.

We could refactor the code here for clarity but I tried to keep my changes as unobtrusive as possible as the 7.10 feature freeze is nearly here.

rylnd

@oatkiller this is fantastic, thanks for looking into this. I had one question but this looks good to me. For posterity: this should close #64589.

x-pack/plugins/security_solution/public/plugin.tsx

This reverts commit 641aa763b7ae4b457256331bee819476f24d21a6.

oatkiller · 2020-10-05T16:13:54Z

x-pack/plugins/security_solution/public/plugin.tsx

+      const appLibs: AppObservableLibs = { apolloClient, kibana: coreStart };
+      const libs$ = new BehaviorSubject(appLibs);
+
+      const detectionsStart = detectionsSubPlugin.start(this.storage);


start is called on most of these subPlugins more than once. That seems like an issue. I'm going to look into this a bit more.

…-size

…little brain

…-size

kibanamachine · 2020-10-13T04:52:30Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 54bc9fb

Metrics [docs]

@kbn/optimizer bundle module count

id	before	after	diff
`securitySolution`	2057	2058	+1

async chunks size

id	before	after	diff
`securitySolution`	10.6MB	10.9MB	⚠️ +287.4KB

distributable file count

id	before	after	diff
`default`	48449	48443	-6

page load bundle size

id	before	after	diff
`securitySolution`	593.2KB	253.5KB	-339.7KB

History

💔 Build #81200 failed 8370bad
💔 Build #81179 failed c13cee7
💔 Build #79705 failed b1ce143
💚 Build #78391 succeeded 854fb995bdba9280b56dea3b57f1b310c2f68ded

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

* Load the redux store factory and initial state factory lazily * Combine certain dynamic imports to reduce total async bundle size (this works because shared dependencies between async chunks are not being de-duped by Webpack.) * Add explicit types in some areas. Co-authored-by: Xavier Mouligneau <189600+XavierM@users.noreply.github.com>

…otphase-to-formlib * 'master' of github.com:elastic/kibana: (59 commits) [Security Solution][Resolver] Replace copy-to-clipboard with native navigator.clipboard (elastic#80193) [Security Solution] Reduce initial bundle size (elastic#78992) [Security Solution][Resolver] Fix Resize node box-shadow bug (elastic#80223) Move observability content (elastic#79978) skip flaky suite (elastic#79389) removing kibana_datatable` in favor of `datatable` (elastic#75184) [ML] Fixes for anomaly swim lane (elastic#80299) [Lens] Smokescreen lens test unskip (elastic#80190) Improved AlertsClient tests structure by splitting a huge alerts_client.tests.ts file into a specific files defined by its responsibility. (elastic#80088) [APM] React key warning when opening popover with external resources (elastic#80328) [Step 1] use Observables on server search API (elastic#79874) Apply back pressure in Task Manager whenever Elasticsearch responds with a 429 (elastic#75666) [Lens] Leverage original http request error (elastic#79831) [Security Solution][Case] Improve ServiceConnectorCaseParams type (elastic#80109) [SECURITY_SOLUTION] Fix query on alert histogram (elastic#80219) [DOCS] Update ingest node pipelines doc (elastic#79187) [Ingest Manager] Split up OpenAPI spec file (elastic#80107) [SECURITY_SOLUTION][ENDPOINT] Fix label on Trusted App create name field (elastic#80001) [Ingest Manager] Fix agent policy bump revision to create only one POLICY_CHANGE action (elastic#80081) Grid layout fixes (elastic#80305) ... # Conflicts: # x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared/data_tier_allocation_field.tsx # x-pack/plugins/index_lifecycle_management/public/shared_imports.ts

* Load the redux store factory and initial state factory lazily * Combine certain dynamic imports to reduce total async bundle size (this works because shared dependencies between async chunks are not being de-duped by Webpack.) * Add explicit types in some areas. Co-authored-by: Xavier Mouligneau <189600+XavierM@users.noreply.github.com>

oatkiller requested review from a team as code owners September 30, 2020 16:56

oatkiller added release_note:skip Skip the PR/issue when compiling release notes v7.10.0 labels Sep 30, 2020

oatkiller commented Sep 30, 2020

View reviewed changes

oatkiller requested review from joshdover, XavierM, spong and rylnd September 30, 2020 18:58

dplumlee approved these changes Sep 30, 2020

View reviewed changes

rylnd approved these changes Sep 30, 2020

View reviewed changes

x-pack/plugins/security_solution/public/plugin.tsx Show resolved Hide resolved

x-pack/plugins/security_solution/public/plugin.tsx Outdated Show resolved Hide resolved

rylnd linked an issue Sep 30, 2020 that may be closed by this pull request

[SIEM] Plugin bundle optimizations #64589

Closed

oatkiller added 18 commits October 5, 2020 11:58

name all async bundles

85b5871

added explicit types and some comments.

e126b8c

add comments

36afbcf

try using a single dynamic bundle

79bee46

oops

27c4281

cleanup comments

ce60f01

refactor mountSecurityFactory

2184e83

fix type

0065e4f

WIP broken

6d38640

Revert "WIP broken"

2f235b2

This reverts commit 641aa763b7ae4b457256331bee819476f24d21a6.

refactorin stuff

bf76ed6

refactoring and adding types

2437757

coming along

8716e2f

cleanup

6a8a832

cleanup

f18b8a4

more cleanup

0872a0a

cleanup

b613421

comments

b1ce143

oatkiller force-pushed the reduce-bundle-size branch from 854fb99 to b1ce143 Compare October 5, 2020 16:00

oatkiller commented Oct 5, 2020

View reviewed changes

XavierM added 3 commits October 6, 2020 16:05

Merge branch 'master' of github.com:elastic/kibana into reduce-bundle…

2c08d05

…-size

create a new lazy file for sub plugin to make it more readble for my …

6f535d1

…little brain

Merge branch 'master' of github.com:elastic/kibana into reduce-bundle…

c13cee7

…-size

XavierM approved these changes Oct 12, 2020

View reviewed changes

XavierM added 2 commits October 12, 2020 16:48

fix types

8370bad

fix circular dependency

54bc9fb

oatkiller merged commit 6ab4be5 into elastic:master Oct 13, 2020

oatkiller deleted the reduce-bundle-size branch October 13, 2020 15:21

oatkiller mentioned this pull request Oct 13, 2020

[7.10] [Security Solution] Reduce initial bundle size (#78992) #80363

Closed

oatkiller mentioned this pull request Oct 13, 2020

[7.x] [Security Solution] Reduce initial bundle size (#78992) #80364

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security Solution] Reduce initial bundle size #78992

[Security Solution] Reduce initial bundle size #78992

oatkiller commented Sep 30, 2020 •

edited

Loading

oatkiller Sep 30, 2020

oatkiller Sep 30, 2020

oatkiller Sep 30, 2020

oatkiller Sep 30, 2020

rylnd left a comment

oatkiller Oct 5, 2020

kibanamachine commented Oct 13, 2020

		import { ConfigureEndpointPackagePolicy } from './management/pages/policy/view/ingest_manager_integration/configure_package_policy';

		import { State, createStore, createInitialState } from './common/store';

[Security Solution] Reduce initial bundle size #78992

[Security Solution] Reduce initial bundle size #78992

Conversation

oatkiller commented Sep 30, 2020 • edited Loading

Summary

screenshots

For maintainers

oatkiller Sep 30, 2020

Choose a reason for hiding this comment

oatkiller Sep 30, 2020

Choose a reason for hiding this comment

oatkiller Sep 30, 2020

Choose a reason for hiding this comment

oatkiller Sep 30, 2020

Choose a reason for hiding this comment

rylnd left a comment

Choose a reason for hiding this comment

oatkiller Oct 5, 2020

Choose a reason for hiding this comment

kibanamachine commented Oct 13, 2020

💚 Build Succeeded

Metrics [docs]

@kbn/optimizer bundle module count

async chunks size

distributable file count

page load bundle size

History

oatkiller commented Sep 30, 2020 •

edited

Loading