如何预加载Enscripten生成函数并封装为Svelte组件

完全可以将加载逻辑封装为通用组件，核心通过Svelte模块级上下文缓存加载状态，避免重复加载，同时内置加载、错误、就绪三种状态，业务侧无需关心底层加载逻辑即可直接调用。

步骤1：创建封装组件 CoolPropLoader.svelte #

<script context="module">
  // 模块级全局缓存，全应用仅加载一次库
  let loadPromise = null
</script>

<script>
  import { onMount } from 'svelte'

  // 支持自定义库文件路径
  export let libPath = 'coolprop.js'

  let loading = true
  let error = null
  let coolPropInstance = null

  onMount(() => {
    // 已触发过加载直接复用缓存
    if (loadPromise) return

    loadPromise = new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = libPath
      script.async = true
      script.onerror = reject

      document.body.appendChild(script)

      script.onload = () => {
        const m = window.Module
        if (!m) return reject(new Error('CoolProp库加载异常，未找到全局Module实例'))
        // 运行时已初始化直接返回实例
        if (m.onRuntimeInitialized) return resolve(m)
        // 等待Emscripten运行时初始化完成
        m.onRuntimeInitialized = () => resolve(m)
      }
    })

    loadPromise
      .then(instance => {
        coolPropInstance = instance
      })
      .catch(err => {
        error = err
      })
      .finally(() => {
        loading = false
      })
  })
</script>

{#if loading}
  <div class="coolprop-loading">资源加载中...</div>
{:else if error}
  <div class="coolprop-error">加载失败：{error.message}</div>
{:else}
  <!-- 将初始化完成的实例通过插槽透传给使用方 -->
  <slot {coolPropInstance} />
{/if}

步骤2：组件使用示例 #

在任意业务组件中直接导入使用即可：

<script>
  import CoolPropLoader from './CoolPropLoader.svelte'

  function calculateDensity(instance) {
    return instance.PropsSI('Dmass', 'T', (20+273.15), 'P', 1000*6894.76,'Xenon')
  }
</script>

<CoolPropLoader let:coolPropInstance>
  <p>氙气密度计算结果：{calculateDensity(coolPropInstance)}</p>
</CoolPropLoader>

注意事项 #

• 若将coolprop.js放在项目静态资源目录（如SvelteKit的static文件夹），将libPath参数改为/coolprop.js即可，路径根据实际资源部署位置调整
• 可自定义组件内加载中、加载失败的展示样式，适配项目UI规范
• 无需保留index.html中原有的加载逻辑，所有逻辑已封装在组件内部

内容的提问来源于stack exchange，提问作者Gani Ganapathi