Have Vite exclude specific files in a dependency

Issue

I have an Ionic React app that I'm building with Vite.

Vite is pulling in some Ionic dependencies that are unnecessary:

• @ionic/core/components/popover.js
• @ionic/core/components/action-sheet.js

I don't use these in my app; they are being pulled in because they are dependencies of ion-select.js, and the tree-shaking isn't sophisticated enough to remove them.

So I would like to somehow manually specify that these two files not be bundled in my app.

I thought I could use the Rollup config, but exclude only handles modules, not specific files in modules.

The rollup-multi-entry plugin has an exclude option, so I tried that:

  rollupOptions: {
    // input is configured by rollup-multi-entry.
    // This is used to exclude unneeded bundled dependencies.
    input: {
      include: ['src/main.tsx'],
      exclude: ['**/node_modules/@ionic/core/components/popover.js'],
    },

However, even with this config, popover.js is still included in the app bundle.

How can I configure Vite to exclude specific files that are being bundled?

Solution

If you are confident that that your code will work and doesn't use ion-select.js file in any way, then you can do this using aliases by substituting a fake module. (Diclaimer: This is micro-optimization and should be avoided as much as possible, I don't really recommend them unless they are really causing problems for you).

All you have to do is create a stub for these specific files in question and use the resolve.alias to point these imports to the mock files.

import path from 'node:path';

// vite.config.js
export default {
  // config options

  resolve: {
    alias: {
      '@ionic/core/components/popover.js': path.join(process.cwd(), 'mock1.js'),
      '@ionic/core/components/action-sheet.js': path.join(process.cwd(), 'mock2.js')
    },
  },
}

Create two files viz. mock1.js and mock2.js inside the root directory. Export whatever values that the original modules poperover.js and action-sheet.js are exporting. Just that those could be literally empty strings.

Keep in mind that there is a good reason why tree-shaking is not working. The most common being that Vite/Rollup thinks that import of these files could be causing some side-effects (e.g. these files could be doing plain side-effect import like import '@ionic/core/global.js' or doing some computation to mutate the global window/globalThis object). Test extensively before you resort to this.

Answered By - Harshal Patil