Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic imports are causing code splitting issues in webpack #6612

Open
3 of 4 tasks
dgoemans opened this issue Nov 1, 2024 · 7 comments
Open
3 of 4 tasks

Dynamic imports are causing code splitting issues in webpack #6612

dgoemans opened this issue Nov 1, 2024 · 7 comments
Assignees
Labels
documentation This is a problem with documentation. guidance General information and guidance, answers to FAQs, or recommended best practices/resources. p2 This is a standard priority issue queued This issues is on the AWS team's backlog

Comments

@dgoemans
Copy link

dgoemans commented Nov 1, 2024

Checkboxes for prior research

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:
#5990
by @nikimicallef

@dgoemans dgoemans added bug This issue is a bug. needs-triage This issue or PR still needs to be triaged. labels Nov 1, 2024
@dgoemans
Copy link
Author

dgoemans commented Nov 1, 2024

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,
    }),
  1. You can explicitly disable chunk loading per entry point:
entry: {
  service1: {
    import: path.resolve(__dirname, 'service1.ts'),
    chunkLoading: false
  }
}

@kuhe kuhe added guidance General information and guidance, answers to FAQs, or recommended best practices/resources. response-requested Waiting on additional info and feedback. Will move to \"closing-soon\" in 7 days. and removed bug This issue is a bug. labels Nov 1, 2024
@kuhe
Copy link
Contributor

kuhe commented Nov 1, 2024

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.

@github-actions github-actions bot removed the response-requested Waiting on additional info and feedback. Will move to \"closing-soon\" in 7 days. label Nov 2, 2024
@dgoemans
Copy link
Author

dgoemans commented Nov 2, 2024

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.

@aBurmeseDev aBurmeseDev self-assigned this Nov 5, 2024
@aBurmeseDev aBurmeseDev added investigating Issue is being investigated and/or work is in progress to resolve the issue. p2 This is a standard priority issue and removed needs-triage This issue or PR still needs to be triaged. investigating Issue is being investigated and/or work is in progress to resolve the issue. labels Nov 5, 2024
@zshzbh
Copy link
Contributor

zshzbh commented Nov 11, 2024

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

Screenshot 2024-11-11 at 9 16 10 AM

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
Copy link
Contributor

zshzbh commented Nov 11, 2024

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.

@zshzbh zshzbh added the documentation This is a problem with documentation. label Nov 11, 2024
@dgoemans
Copy link
Author

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
Copy link
Contributor

zshzbh commented Nov 12, 2024

internal ref : V1578398855

@zshzbh zshzbh added the queued This issues is on the AWS team's backlog label Nov 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation This is a problem with documentation. guidance General information and guidance, answers to FAQs, or recommended best practices/resources. p2 This is a standard priority issue queued This issues is on the AWS team's backlog
Projects
None yet
Development

No branches or pull requests

4 participants