Dynamic imports are causing code splitting issues in webpack

[dgoemans]

Checkboxes for prior research

• [X] I've gone through Developer Guide and API reference
• [X] I've checked AWS Forums and StackOverflow.
• [X] I've searched for previous similar issues and didn't find any solution.

Describe the bug

After upgrading to AWS SDK for JavaScript v3 (from 3.398.0 to 3.682.0), we encountered an issue where Webpack splits the build output into multiple chunks/folders containing AWS-related code (e.g., 699.js, etc).

Despite having Webpack configured to bundle all modules into a single JavaScript file, these chunks were still generated. Investigation revealed that several AWS SDK modules, such as @aws-sdk/credential-provider-env and @aws-sdk/credential-provider-http, use dynamic imports internally, triggering this behavior.

Regression Issue

• [ ] Select this option if this issue appears to be a regression.

SDK version number

@aws-sdk/client-*@3.682.0

Which JavaScript Runtime is this issue in?

Node.js

Details of the browser/Node.js/ReactNative version

Node 18

Reproduction Steps

1. Use Webpack to bundle a project that imports AWS SDK v3 components (e.g., S3Client, DynamoDBClient).
2. Configure Webpack with optimization.splitChunks: false and runtimeChunk: false to prevent code splitting.
3. Observe that Webpack still splits certain AWS SDK modules into separate chunks/folders.

Observed Behavior

Instead of bundling all the dependencies into a single file, the code is split into separate chunks. When enabling named chunk IDs you can see that most of them are from the credentials providers, where dynamic imports are used.

Expected Behavior

Webpack should bundle all imported AWS SDK modules into the main JavaScript output, without creating additional chunks, especially when code splitting is explicitly disabled.

Possible Solution

Modifying webpack config to add aliases to force a non-dynamic import:

 resolve: {
    alias: {
      '@aws-sdk/credential-provider-env': path.resolve(
        __dirname,
        'node_modules/@aws-sdk/credential-provider-env/dist-cjs/index.js'
      ),
... insert all other modules here
  }
}

Additional Information/Context

Issue was already reported here: https://github.com/aws/aws-sdk-js-v3/issues/5990 by @nikimicallef

[dgoemans]

Update: Some nicer, future proof, options to prevent the code splitting from happening with Dynamic imports:

1. You can force the max chunks using the webpack.optimize.LimitChunkCountPlugin. This will force all smaller chunks into the main chunk, and prevent splitting the bundle.

   new optimize.LimitChunkCountPlugin({
     maxChunks: 1,
   }),

2. You can explicitly disable chunk loading per entry point:

   entry: {
   service1: {
   import: path.resolve(__dirname, 'service1.ts'),
   chunkLoading: false
   }
   }

[kuhe]

This is an intentional and configurable webpack behavior. We do not plan to change it, since many users are relying on the code-splitting behavior, and configuration of webpack allows opting out.

[dgoemans]

I understand that it's intentional behavior, but it was introduced without any mention (that i could find) in the release notes. This meant that between minor updates, stuff broke. I noticed some docs (a footnote) about this eventually, but with no reasonable solution. As I found in the closed issues, seems to have affected others too, and I assume some of them have simply left it at an old version, which wasn't an option for us and is generally not a good long term thing.

At the very least, this issue, with a solution, is important as documentation for others who encounter the same problem, but I would suggest adding some expanded docs for this.

[zshzbh]

Hey @dgoemans ,

Thanks for the feedback! The code splitting behavior is introduced in our supplemental doc under performance section: https://github.com/aws/aws-sdk-js-v3/blob/main/supplemental-docs/performance/dynamic-imports.md

I recognize searching for this topic may not be straightforward. I'll discuss with the team about potentially highlighting or linking directly to this specific section from our main page readme file to help make it more discoverable.

Thanks! Maggie

[zshzbh]

Updates:

We will add a link to supplemental doc from developer guide. Some other updates will also be made to make supplemental doc more discoverable.

[dgoemans]

That would help, thanks! I eventually found the docs you linked here, but it took a lot of searching, since they were not referenced in the release notes or any other "normal entry point" docs I found. Didn't even know those supplemental docs existed!

[zshzbh]

internal ref : V1578398855