๐Ÿ“ฆ brijeshb42 / tsdown-treeshake-repro

โ˜… 0 stars โ‘‚ 0 forks ๐Ÿ‘ 0 watching
๐Ÿ“ฅ Clone https://github.com/brijeshb42/tsdown-treeshake-repro.git
HTTPS git clone https://github.com/brijeshb42/tsdown-treeshake-repro.git
SSH git clone git@github.com:brijeshb42/tsdown-treeshake-repro.git
CLI gh repo clone brijeshb42/tsdown-treeshake-repro
Brijesh Bittu Brijesh Bittu tsdown 3b2823d 6 days ago ๐Ÿ“ History
๐Ÿ“‚ tsdown View all commits โ†’
๐Ÿ“ public
๐Ÿ“ src
๐Ÿ“„ .gitignore
๐Ÿ“„ index.html
๐Ÿ“„ package-lock.json
๐Ÿ“„ package.json
๐Ÿ“„ README.md
๐Ÿ“„ tsconfig.app.json
๐Ÿ“„ tsconfig.json
๐Ÿ“„ tsconfig.node.json
๐Ÿ“„ tsdown.config.ts
๐Ÿ“„ vite.config.ts
๐Ÿ“„ README.md

Repro to demonstrate non tree-shakability of tsdown's build output

  • Clone and change into the projest directory -
git clone https://github.com/brijeshb42/tsdown-treeshake-repro.git
cd tsdown-treeshake-repro

  • Install dependencies
npm i

  • Check the simulated lib file -> src/lib/index.ts being imported in App.ts. Initially it imports the lib/index.ts file.
  • Run npm run build to build the project with vite.
  • Verify the output in dist/assets/index-[hash].js. It'll contain something like -
import "./polyfill-COaX8i6R.js";
const hello12 = "hello1_2";
function main() {
  console.log(hello12);
}
main();

Here, since in the source App.ts, it was only using hello.hello1.hello12 in the code, the final bundle only contains hello12.

  • Now run npm run build:lib and update the import in App.ts to be from './lib/index.js' to point to the file built by tsdown instead.
  • Rebuild the vite project with npm run build and inspect the output in dist/assets/index-[hash].js. It'll contain something like -
var __defProp = Object.defineProperty;
var __exportAll = (all, symbols) => {
  let target = {};
  for (var name in all) {
    __defProp(target, name, {
      get: all[name],
      enumerable: true,
    });
  }
  return target;
};
var hello1_exports = /* @__PURE__ */ __exportAll({
  hello11: () => hello11,
  hello12: () => hello12,
});
const hello11 = "hello1_1";
const hello12 = "hello1_2";
function main() {
  console.log(hello1_exports.hello12);
}
main();

This contains some runtime code by tsdown (not significant for a big project). But it also contains the imports that are not actually used in the source App.ts, in this case, hello11 is not used but is still part of the code.