Modular imports with AWS Amplify

The latest release of AWS Amplify now includes modular imports. Let’s take a look at what this means in terms of implementation & benchmarking.

Overview

AWS Amplify is a JavaScript library that allows developers to quickly & easily connect their apps to cloud resources to enable functionality like Authentication, GraphQL, Analytics, Chatbots, Serverless functions & more.

As the AWS Amplify library grows & more features are added, it’s become apparent that we needed to modularize the library so that developers could import only the features that they needed without any excess code.

This means that you can now import only the individual modules you would like to use:

import Auth from '@aws-amplify/auth'import Analytics from '@aws-amplify/analytics'import API from '@aws-amplify/api'import Storage from '@aws-amplify/storage'import PubSub from '@aws-amplify/pubsub'

Instead of getting the whole library, unnecessarily increasing the size of your JS bundle:

import { Auth } from 'aws-amplify'

When configuring your app with AWS Amplify, you can also just import the Amplify library from core & call configure this way:

import Amplify from '@aws-amplify/core'import config from './aws-exports'Amplify.configure(config)

Benchmark

We’ve tested all modules, & they all score 100 in lighthouse for performance and best practice when using GZIP text compression.

Auth and Analytics

Modular builds decreases bundle size by 10% in plain JavaScript

Modular builds decreases time to first meaningful paint by 15% in plain JavaScript.

Auth and Interactions in React

Modular builds decreases overall bundle size by 69% using create-react-app, withAuthenticator, Auth, and Interactions categories.

Modular builds decreases time to first meaningful paint by 17% using create-react-app, withAuthenticator, Auth, and Interactions categories.

Bundle Sizes

Vanilla JavaScript with the entire library: 219 KB GZIPFirst meaningful paint: 130ms

Vanilla JavaScript with only Auth and Analytics: ​199 KB GZIPFirst meaningful paint: 150 ms

React withAuthenticator created using create-react-app with entire library: 816 KB GZIP (includes React.js)First meaningful paint: 280 ms

React withAuthenticator created using create-react-app with only Auth and Interactions: **481 KB GZIP (includes React.js)**First meaningful paint: 240 ms

Conclusion

As the AWS Amplify team continues iterating on & improving the library, we’ll also always be looking for ways to make the library faster & smaller. If you have any suggestions or comments, please feel free to submit an issue!

To learn more about modular imports in AWS Amplify, click here.