Reduce AWS Amplify bundle size

AWS (Amazon Web Service) Amplify is an easy-to-use framework for mobile and web applications that utilize AWS cloud services. However, I recently encountered a bundle size issue after building with Amplify, because it is really heavy in the build package. This little article is about how to optimize the import and reduce the first load size in our applications.

I'm using a Nextjs app for this example

As you can see the First Load JS shared by all is 209 kB

This is how I imported the Amplify module before optimization.

import Amplify from "aws-amplify";

This is how I import only the required submodules.

import Amplify from "@aws-amplify/core";

It is always a good habit to analyze the bundle size after the build. Then you will find unoptimized imports and libraries. Always try to import submodules only from the libraries needed within the project. You can use tools like "source-map-explorer" to analyze your build package.