如何配置Vite排除Ionic依赖包中的特定文件？

针对你遇到的@ionic/core/components/popover.js和@ionic/core/components/action-sheet.js因摇树优化不彻底被打包的问题，可以用以下两种方案解决：

方案一：自定义Rollup resolveId钩子 #

在Vite配置文件（vite.config.ts/vite.config.js）中，通过Rollup的resolveId钩子将目标文件标记为外部依赖，让打包工具跳过它们：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      plugins: [
        {
          resolveId(id) {
            // 匹配需要排除的两个组件文件
            if (id === '@ionic/core/components/popover.js' || id === '@ionic/core/components/action-sheet.js') {
              // 标记为外部模块，不参与打包
              return { id, external: true };
            }
          }
        }
      ]
    }
  }
});

因为你确认不会在应用中用到这两个组件，所以即使打包时排除它们，也不会影响ion-select的正常运行（只要你的业务逻辑不会触发这两个组件的渲染）。

方案二：使用rollup-plugin-ignore插件 #

1. 先安装插件：

npm install rollup-plugin-ignore --save-dev

2. 在Vite配置中引入并配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import ignore from 'rollup-plugin-ignore';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      plugins: [
        ignore([
          '@ionic/core/components/popover.js',
          '@ionic/core/components/action-sheet.js'
        ])
      ]
    }
  }
});

这个插件会直接拦截指定模块的导入请求，打包时不会将它们包含进产物，配置更简洁直观。

为什么之前的配置无效？ #

你之前用的rollup-multi-entry的exclude是针对入口文件的过滤规则，而popover.js和action-sheet.js是ion-select.js的内部依赖，不属于入口文件范畴，所以这个配置无法生效。上述两种方案都是在模块解析阶段做拦截，能精准处理这类深层依赖的排除需求。

内容的提问来源于stack exchange，提问作者Patrick Kenny