tree-shaking doesn't work well for UMD bundle with axios and dayjs

[zerofront]

Current Behavior

I used tsdx to create a project A, and import axios, dayjs, and export. then I use tsdx to create project B and import some function from project A, but not using axios, dayjs. and I find axios/dayjs code in project B UMD bundle

Flow

project A

tsdx create A (select basic)

change src/index.ts

import dayjs from 'dayjs'
import axios from 'axios'

const sum = (a: number, b: number) => {
  console.log('boop');
  return a + b;
};

const minus = (a: number, b: number) => {
  console.log('poop');
  return a - b;
};

export {
  sum,
  minus,
  dayjs,
  axios,
}

npm publish

project B

tsdx create B (select basic)

change src/index.ts

import { minus } from 'A'

function final(a: number, b: number) {
  return minus(a, b)
}

export {
  final
}

change project b tsdx.config.js

module.exports = {
  rollup(config) {
    if (config.output.format === 'umd') {
      delete config.external;
    }
    return config;
  }
}

Check UMD bundle, although I did not use axios, the bundle has this part of the code

[agilgur5]

So you've again removed the issue template here, despite that is not supposed to be removed and despite that I explicitly asked you in https://github.com/formium/tsdx/issues/989#issuecomment-795549389 to not remove the issue template. I'll ask again for you to please stop removing it. Further non-compliance will result in auto-closes.

[agilgur5]

So tree-shaking in general is highly application specific, and not a "it works or not" type of thing. Rollup itself has a section in the docs about it.

Rollup has tree-shaking turned on by default and only has a few configurations for it. TSDX actually adds some other optimizations (like propertyReadSideEffects and babel-plugin-annotate-pure-calls) to potentially add more ability to tree-shake.

So there is not really much TSDX can do to further improve that. There is preserveModules in #276, but that has no impact on a single tiny file build like your example here. Rollup 2 in #889 may have some improvements. You can also make more aggressive assumptions for tree-shaking at your own risk by modifying the Rollup config in tsdx.config.js. You will probably get the same results or worse using Rollup directly, but you are welcome to try and give any feedback from there.

Check UMD bundle, although I did not use axios, the bundle has this part of the code

So dayjs and axios do not seem to be tree-shakeable, according to bundlephobia. They both seem to export CJS only and don't have sideEffects: false. dayjs seems to have some notes on this here https://github.com/iamkun/dayjs/issues/1281. Couldn't find much on axios's issues.

So as I said, tree-shaking is highly application-specific as it depends on your library and your dependencies not having side-effects and enabling tree-shaking with ESM. Rollup by default has it enabled and TSDX by default is a bit more aggressive with its assumptions. There is not really much more that TSDX or Rollup can do, so this isn't quite the right place to file an issue.

(I'm also not totally sure how/if tree-shaking works with UMD (or what happens if you have no externals). Theoretically it should still work I think.)