Ionic React应用组件拆分：如何减小Chunk体积？

针对你遇到的Ionic React框架组件打包成786KB大Chunk、手动拆分@ionic/react反而生成更大Chunk的问题，结合Vite 4.4.9和Ionic React 7.4.1的特性，可通过以下方式优化：

• 放弃手动打包整个@ionic/react包
  手动将@ionic/react单独拆分为一个Chunk时，会自动把它依赖的@ionic/core、Stencil内部模块等全部打包进去，反而导致体积膨胀。应该让Vite自动拆分其内部子模块，而非强制合并整个包。

• 配置Rollup自动拆分规则
  在vite.config.ts的build.rollupOptions.output中优化splitChunks配置，强制拆分超过指定大小的Chunk，并针对Ionic相关模块设置单独的缓存组：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
    build: {
      rollupOptions: {
        output: {
          chunkFileNames: 'assets/[name]-[hash].js',
          // 保留你之前验证有效的手动拆分配置
          manualChunks: {
            editorEngine: ['@ckeditor/ckeditor5-engine'],
            ionicCore: ['@ionic/core/components'],
            pluginPurchase: ['cordova-plugin-purchase'],
            stencil: ['@stencil/core/internal'],
          },
          splitChunks: {
            chunks: 'all',
            minSize: 10000, // 最小Chunk大小（10KB）
            maxSize: 200000, // 超过200KB就强制拆分
            cacheGroups: {
              // 单独拆分@ionic/react核心模块
              ionicReactCore: {
                test: /@ionic\/react(?!\/router)/,
                priority: 10,
                enforce: true,
                reuseExistingChunk: true
              },
              // 单独拆分路由模块
              ionicReactRouter: {
                test: /@ionic\/react-router/,
                priority: 10,
                enforce: true
              },
              // 处理其他node_modules依赖
              defaultVendors: {
                test: /[\\/]node_modules[\\/]/,
                priority: -10,
                reuseExistingChunk: true
              }
            }
          }
        }
      }
    }
  });
  

• 确保Ionic组件按需导入
  避免使用全量导入方式（如import * as Ionic from '@ionic/react'），改为按需导入单个组件：

  // 推荐写法
  import { IonButton, IonCard } from '@ionic/react';
  

  这种方式能让Vite的树摇功能有效剔除未使用的组件，减少整体打包体积，同时也更利于Chunk拆分。

• 移除experimentalMinChunkSize（可选）
  该实验性配置可能与splitChunks.maxSize产生冲突，若上述配置效果不佳，可尝试移除experimentalMinChunkSize，让Rollup的默认拆分逻辑更顺畅。

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