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

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

Closed
zerofront opened this issue Mar 15, 2021 · 2 comments
Closed
Labels
kind: support Asking for support with something or a specific use case problem: removed issue template OP removed the issue template without good cause problem: stale Issue has not been responded to in some time scope: upstream Issue in upstream dependency

Comments

@zerofront
Copy link

zerofront commented Mar 15, 2021

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 agilgur5 changed the title tree shaking doesn't work well tree shaking doesn't work well for UMD bundle with axios and dayjs Mar 15, 2021
@agilgur5 agilgur5 added kind: support Asking for support with something or a specific use case problem: removed issue template OP removed the issue template without good cause scope: upstream Issue in upstream dependency labels Mar 15, 2021
@agilgur5
Copy link
Collaborator

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 #989 (comment) 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 agilgur5 changed the title tree shaking doesn't work well for UMD bundle with axios and dayjs tree-shaking doesn't work well for UMD bundle with axios and dayjs Mar 16, 2021
@agilgur5
Copy link
Collaborator

agilgur5 commented Mar 16, 2021

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 iamkun/dayjs#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.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
kind: support Asking for support with something or a specific use case problem: removed issue template OP removed the issue template without good cause problem: stale Issue has not been responded to in some time scope: upstream Issue in upstream dependency
Projects
None yet
Development

No branches or pull requests

2 participants