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

@MantisClone

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    Status

    🎫 Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions