Skip to content

As a Builder, I want package tree-shaking, so I can minimize my build size, compile time, test time, and page load time. #1148

Description

@MantisClone

Problem

  • The top-level tsconfig.json specifies "module": "commonjs". This prevents tree-shaking, or the elimination of dead code.

According to the webpack docs:

In order to take advantage of tree shaking, you must...

  • Use ES2015 module syntax (i.e. import and export).
  • Ensure no compilers transform your ES2015 module syntax into CommonJS modules (this is the default behavior of the popular Babel preset @babel/preset-env - see the documentation for more details).
  • Add a "sideEffects" property to your project's package.json file.
  • Use the production mode configuration option to enable various optimizations including minification and tree shaking.
  • Make sure you set a correct value for devtool as some of them can't be used in production mode.

Solution

  • Set "module": "node16" and "moduleResolution": "node16" in the tsconfig.json

    For compatibility with Node.js so users who require CommonJS can get it, but consumers of our bundled packages will get ES2020 and can do tree-shaking.

    "module": "node16"

    Available from 4.7+, the node16 and nodenext modes integrate with Node’s native ECMAScript Module support. The emitted JavaScript uses either CommonJS or ES2020 output depending on the file extension and the value of the type setting in the nearest package.json

    "moduleResolution": "node16"

    Node.js v12 and later supports both ECMAScript imports and CommonJS require, which resolve using different algorithms. These moduleResolution values, when combined with the corresponding module values, picks the right algorithm for each resolution based on whether Node.js will see an import or require in the output JavaScript code.

  • Append .js to all relative imports filenames

  • Set "type": "module" in all package.json files

Definiton of Done

Non Issues


Migrated from Asana: https://app.asana.com/0/1203912381456855/1205320821557402

Activity

  1. converted this from a draft issue on Sep 12, 2023
  2. moved this from 📋 Backlog to 🐞 Bug / Tech Debt in Request Network Tech Backlogon Sep 18, 2023
  3. MantisClone commented on Oct 13, 2023

    @MantisClone
    ContributorAuthor

    @skiv71 discovered that when we configure "module": "es2015" we can still use our packages in a node js application with require(). So maybe we don't need to use "module": "node16".

  4. MantisClone commented on Oct 16, 2023

    @MantisClone
    ContributorAuthor

    We've discussed this task a lot this past week, despite it not being part of the sprint. I've decided to move it into this sprint so that we can implement it and move on.

  5. moved this from 🐞 Backlog: Bug / Tech Debt to 🔖 Sprint Backlog in Request Network Tech Backlogon Oct 16, 2023
  6. moved this from 🔖 Sprint Backlog to 🏗 In Progress in Request Network Tech Backlogon Oct 20, 2023
  7. MantisClone commented on Oct 21, 2023

    @MantisClone
    ContributorAuthor

    While working on this, I disabled Webpack. I think that we'll remove Webpack as part of this task so I've added #1203 as a subtask in the description.

  8. moved this from 🏗 In Progress to 🔖 Sprint Backlog in Request Network Tech Backlogon Oct 25, 2023
  9. MantisClone commented on Oct 25, 2023

    @MantisClone
    ContributorAuthor

    The effort required to fix this is larger than anticipated and upon closer inspection, we realize that tree-shaking will still be blocked by #1202 even after switching to ES Modules.

    Thus, we still want to do this task, but I'm reducing the priority to Medium.

  10. moved this from 🔖 Sprint Backlog to 🐞 Backlog: Bug / Tech Debt in Request Network Tech Backlogon Oct 26, 2023
  11. removed their assignment
    on Oct 29, 2024
  12. moved this from 🐞🧹 Backlog: Bug, Tech Debt, or Chore to 🎫 Backlog in Request Network Tech Backlogon Oct 29, 2024
  13. moved this from 🎫 Backlog to 🔖 Sprint Backlog in Request Network Tech Backlogon Jan 7, 2026
  14. moved this from 🔖 Sprint Backlog to 🎫 Backlog in Request Network Tech Backlogon Jan 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions