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 ineffective in default mode, removes all program code in "smallest" mode #16720

Open
7 tasks done
gabrielecirulli opened this issue May 19, 2024 · 0 comments
Open
7 tasks done

Comments

@gabrielecirulli
Copy link

Describe the bug

I have been unable to get tree shaking to work in my application. When used with default setting, the bundle size is equivalent to having rollupOptions.treeshake set to false, indicating that it's not applying correctly.

Setting rollupOptions.treeshake to "smallest" causes all program code to be removed from the emitted bundle. The content of index.js boils down to the following:

In the linked repository, the result of a build with "smallest" is the following. Note how it does not contain my code, only boilerplate:

(function () {
  const t = document.createElement('link').relList;
  if (t && t.supports && t.supports('modulepreload')) return;
  for (const e of document.querySelectorAll('link[rel="modulepreload"]')) i(e);
  new MutationObserver((e) => {
    for (const r of e)
      if (r.type === 'childList')
        for (const o of r.addedNodes)
          o.tagName === 'LINK' && o.rel === 'modulepreload' && i(o);
  }).observe(document, { childList: !0, subtree: !0 });
  function s(e) {
    const r = {};
    return (
      e.integrity && (r.integrity = e.integrity),
      e.referrerPolicy && (r.referrerPolicy = e.referrerPolicy),
      e.crossOrigin === 'use-credentials'
        ? (r.credentials = 'include')
        : e.crossOrigin === 'anonymous'
        ? (r.credentials = 'omit')
        : (r.credentials = 'same-origin'),
      r
    );
  }
  function i(e) {
    if (e.ep) return;
    e.ep = !0;
    const r = s(e);
    fetch(e.href, r);
  }
})();

I am unsure how to get tree shaking to work, and the documentation I've been able to find so far has not taken me very far.

Reproduction

https://github.com/gabrielecirulli/vite-treeshaking

Steps to reproduce

  • Check vite.config.js to see whether rollupOptions.treeshake is set to "smallest" or not.
  • Run vite build with the above configuration.
  • Observe the size of the generated index file.
  • Open the generated index file and observe the code.

System Info

System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M2
    Memory: 457.44 MB / 24.00 GB
    Shell: 3.6.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 21.5.0 - ~/.local/share/nvm/v21.5.0/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - ~/.local/share/nvm/v21.5.0/bin/npm
    pnpm: 8.14.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 124.0.6367.60
    Chrome Canary: 125.0.6422.0
    Firefox Nightly: 128.0a1
    Safari: 17.0
    Safari Technology Preview: 17.4
  npmPackages:
    vite: ^5.2.11 => 5.2.11

Used Package Manager

npm

Logs

No response

Validations

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant