fixes #24570 - dynamicailly import password strength component

this reduced the vendor file by about 800kb and reduce
every full page reload by about 100ms on my machine

more benchmark in the PR

config/webpack.vendor.js

@@ -11,7 +11,6 @@ module.exports = [
   'react-ellipsis-with-tooltip',
   'react-numeric-input',
   'react-onclickoutside',
-  'react-password-strength',
   'patternfly-react',
   'react-redux',
   'redux',

package.json

@@ -100,6 +100,7 @@
     "react-dom": "^16.8.1",
     "react-ellipsis-with-tooltip": "^1.0.8",
     "react-intl": "^2.8.0",
+    "react-loadable": "^5.5.0",
     "react-numeric-input": "^2.0.7",
     "react-onclickoutside": "^6.6.2",
     "react-password-strength": "^2.4.0",

webpack/assets/javascripts/react_app/components/PasswordStrength/index.js

@@ -1,5 +1,7 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+import Loadable from 'react-loadable';
+import { LoadingState } from 'patternfly-react';
 
 import * as actions from './PasswordStrengthActions';
 import {
@@ -8,7 +10,11 @@ import {
 } from './PasswordStrengthSelectors';
 import reducer from './PasswordStrengthReducer';
 
-import PasswordStrength from './PasswordStrength';
+const PasswordStrength = Loadable({
+  loader: () =>
+    import(/* webpackChunkName: 'passwordStrength' */ './PasswordStrength'),
+  loading: LoadingState,
+});
 
 // map state to props
 const mapStateToProps = ({ passwordStrength }) => ({