fix(storage): Optimized storage category sideEffects to improve sha…

…ke-ability (#10375)

<!--
Please make sure to read the Pull Request Guidelines:

https://github.com/aws-amplify/amplify-js/blob/main/CONTRIBUTING.md#pull-requests
-->

#### Description of changes
Refactored the storage module's `sideEffects` to improve shake-ability
by moving singleton registration out of `index.ts`. Verified change with
a simple Auth-only React app and a variety of bundlers.

##### Bundler results
The table below outlines observed bundle size improvements from this
change. Apps that don't use storage directly should also see
improvements from no longer having to bundle `@aws-sdk/client-s3`.
| Bundler | Parsed `packages` Δ | Parsed `node_modules` Δ | GZipped
`packages` Δ | GZipped `node_modules` Δ |
| --- | --- | --- | --- | --- |
| Webpack | -41 kB | -107 kB | -6.58 kB | -48 kB |
| Rollup | -44 kB | -390 kB | NA | NA |
| Parcel | -31 kB | -98 kB | NA | NA |
  
#### Issue #, if available
Tangentially related to [Increase in package size with
aws-amplify@4.3.36](https://t.corp.amazon.com/P72001406/overview)

#### Description of how you validated changes
- Manually confirmed bundle optimization with a simple Auth sample app
-
[`build_test_deploy`](https://app.circleci.com/pipelines/github/aws-amplify/amplify-js/14763/workflows/5ebc88a2-e898-4d42-a177-774b7dd0fbcc)
CircleCI test pass
- The 4 failing datastore observe tests are unrelated & currently being
investigated by the datastore team

#### Checklist
<!-- Remove items that do not apply. For completed items, change [ ] to
[x]. -->

- [x] PR description included
- [x] `yarn test` passes
- [x] Tests are unchanged
- [ ]  Relevant documentation is changed or added (and PR referenced)

By submitting this pull request, I confirm that my contribution is made
under the terms of the Apache 2.0 license.

packages/storage/package.json

@@ -9,9 +9,9 @@
     "./lib/index": "./lib-esm/index.js"
   },
   "sideEffects": [
-    "./src/index.ts",
-    "./lib/index.js",
-    "./lib-esm/index.js",
+    "./src/Storage.ts",
+    "./lib/Storage.js",
+    "./lib-esm/Storage.js",
     "./dist/aws-amplify-storage.min.js",
     "./dist/aws-amplify-storage.js"
   ],

packages/storage/src/Storage.ts

@@ -11,7 +11,7 @@
  * and limitations under the License.
  */
 
-import { ConsoleLogger as Logger, Parser } from '@aws-amplify/core';
+import { Amplify, ConsoleLogger as Logger, Parser } from '@aws-amplify/core';
 import { AWSS3Provider } from './providers';
 import {
 	StorageCopySource,
@@ -35,6 +35,7 @@ import { PutObjectCommandInput } from '@aws-sdk/client-s3';
 import { AWSS3UploadTask } from './providers/AWSS3UploadTask';
 
 const logger = new Logger('StorageClass');
+const loggerStorageInstance = new Logger('Storage'); // Logging relating to Storage instance management
 
 const DEFAULT_PROVIDER = 'AWSS3';
 /**
@@ -405,6 +406,41 @@ export class Storage {
 	}
 }
 
+/**
+ * Configure & register Storage singleton instance.
+ */
+let _instance: Storage = null;
+const getInstance = () => {
+	if (_instance) {
+		return _instance;
+	}
+	loggerStorageInstance.debug('Create Storage Instance, debug');
+	_instance = new Storage();
+	_instance.vault = new Storage();
+
+	const old_configure = _instance.configure;
+	_instance.configure = options => {
+		loggerStorageInstance.debug('storage configure called');
+		const vaultConfig = { ...old_configure.call(_instance, options) };
+
+		// set level private for each provider for the vault
+		Object.keys(vaultConfig).forEach(providerName => {
+			if (typeof vaultConfig[providerName] !== 'string') {
+				vaultConfig[providerName] = {
+					...vaultConfig[providerName],
+					level: 'private',
+				};
+			}
+		});
+		loggerStorageInstance.debug('storage vault configure called');
+		_instance.vault.configure(vaultConfig);
+	};
+	return _instance;
+};
+
+export const StorageInstance: Storage = getInstance();
+Amplify.register(StorageInstance);
+
 /**
  * @deprecated use named import
  */

packages/storage/src/index.ts

@@ -11,50 +11,13 @@
  * and limitations under the License.
  */
 
-import { Storage as StorageClass } from './Storage';
-
-import { Amplify, ConsoleLogger as Logger } from '@aws-amplify/core';
-
-const logger = new Logger('Storage');
-
-let _instance: StorageClass = null;
-
-const getInstance = () => {
-	if (_instance) {
-		return _instance;
-	}
-	logger.debug('Create Storage Instance, debug');
-	_instance = new StorageClass();
-	_instance.vault = new StorageClass();
-
-	const old_configure = _instance.configure;
-	_instance.configure = options => {
-		logger.debug('storage configure called');
-		const vaultConfig = { ...old_configure.call(_instance, options) };
-
-		// set level private for each provider for the vault
-		Object.keys(vaultConfig).forEach(providerName => {
-			if (typeof vaultConfig[providerName] !== 'string') {
-				vaultConfig[providerName] = {
-					...vaultConfig[providerName],
-					level: 'private',
-				};
-			}
-		});
-		logger.debug('storage vault configure called');
-		_instance.vault.configure(vaultConfig);
-	};
-	return _instance;
-};
-
-export const Storage: StorageClass = getInstance();
-Amplify.register(Storage);
+import { Storage, StorageInstance } from './Storage';
 
 /**
  * @deprecated use named import
  */
-export default Storage;
+export default StorageInstance;
 
-export { StorageClass };
+export { Storage as StorageClass, StorageInstance as Storage };
 export * from './providers';
 export * from './types';