如何在Tauri 2中延迟导入由Vite构建的React组件？

你提到的React组件示例如下：

import {Form} from 'antd';
import {useEffect} from "react";

export default function Config() {
  const [configForm] = Form.useForm();
  useEffect(() => {
    configForm.setFieldsValue(someInitalValues)
  }, []) // 这里补全了useEffect的依赖数组，避免React警告

  return (
    <Form form={configForm}>
      something item...
    </Form>
  )
}

想要在Tauri 2的宿主页面里点击按钮后动态导入这类外部React组件，这个需求其实可以分三步来落地，我给你一步步拆解：

第一步：完善Vite配置，打包可动态导入的React组件库 #

你现有的Vite配置还没补全库打包的关键参数，得调整下让输出的文件支持动态导入：

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

export default defineConfig({
  plugins: [react()],
  define: {
    'process.env': {}
  },
  build: {
    minify: false,
    lib: {
      entry: resolve(__dirname, 'src/Config.jsx'), // 替换成你的组件实际入口路径
      name: 'ConfigComponent', // 可选的全局变量名
      fileName: (format) => `config-component.${format}.js`
    },
    rollupOptions: {
      // 排除React和ReactDOM，避免和宿主页面的依赖重复打包
      external: ['react', 'react-dom'],
      output: {
        // 映射外部依赖的全局变量，确保组件能找到宿主环境的React
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      }
    }
  }
})

执行vite build后，你会得到ES模块格式的打包文件，这种格式最适合动态导入场景。

第二步：在Tauri宿主页面实现点击触发的动态导入 #

先把打包好的组件文件放到Tauri项目的public目录下（或者配置tauri.conf.json的资源路径，确保Tauri能访问到）。然后在宿主的React组件里写逻辑：

import { useState } from 'react';

export default function HostPage() {
  const [LoadedConfigComponent, setLoadedConfigComponent] = useState(null);

  const handleLoadComponent = async () => {
    try {
      // 动态导入打包后的组件文件，路径要对应你存放的位置
      const componentModule = await import('/config-component.es.js');
      // 因为你的组件是*默认导出*，所以取module.default
      setLoadedConfigComponent(componentModule.default);
    } catch (err) {
      console.error('加载组件出错:', err);
    }
  };

  return (
    <div className="host-container">
      <button onClick={handleLoadComponent} style={{ padding: '8px 16px' }}>
        加载配置组件
      </button>
      {/* 组件加载完成后再渲染 */}
      {LoadedConfigComponent && <LoadedConfigComponent />}
    </div>
  );
}

第三步：调整Tauri的安全配置，确保组件能正常加载 #

Tauri 2默认的安全限制比较严格，你需要在tauri.conf.json里做些调整：

{
  "tauri": {
    "allowlist": {
      "fs": {
        "readFile": true,
        "scope": ["$PUBLIC/*"] // 允许读取public目录下的文件
      }
    },
    "security": {
      "csp": "default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline';"
      // 调整CSP策略，允许本地脚本执行和内联样式
    }
  }
}

注意：CSP配置要根据实际情况微调，在保证安全的前提下满足组件加载需求。

另外提个小建议：如果你的组件依赖AntD这类第三方库，最好在宿主页面统一引入这些依赖，避免Vite打包时重复打包导致体积过大。

备注：内容来源于stack exchange，提问作者Jayden