Svelte组件运行前加载coolprop.js的实现问题咨询

• CoolProp.js是Emscripten编译生成的Wasm绑定脚本，原生script标签的onload事件仅代表JS主脚本下载执行完成，不代表内部Wasm文件加载、模块实例化流程结束，此时全局Module对象还未绑定PropsSI方法，直接调用必然触发初始化报错。
• 原代码的Svelte渲染逻辑存在硬伤：{#await}语法要求绑定的变量是Promise实例，但代码中rho初始值为数字0，从未被赋值为合法Promise，永远无法匹配正常渲染分支。
• 第一份实现中无上下文直接调用resolve()，属于未定义变量引用，直接触发组件初始化崩溃。
• 为什么只有HMR时能正常运行：热更新触发组件重渲染时，CoolProp的Wasm模块早已在页面首次加载的流程中完成了全局初始化，此时调用Module.PropsSI自然不会报错，但首屏加载的时序条件不满足，就会直接功能异常。
• svelte:head内绑定的脚本load事件存在监听不到的时序问题：Svelte客户端水合的执行时机早于脚本load回调的绑定时机，只有热更新时脚本已经提前加载完成，回调才会被同步触发，出现“只有改代码才正常”的假象。

1. 放弃通过svelte:head静态引入+on:load绑定的方式，改为在组件onMount生命周期里动态创建script标签加载CoolProp资源，确保事件绑定时机早于脚本load触发时间。
2. 利用CoolProp自身暴露的初始化完成回调判断模块完全就绪，不依赖原生脚本的load事件判断可用状态。
3. 将密度计算逻辑封装为独立Promise，直接绑定到Svelte的{#await}块，匹配Svelte的加载状态渲染逻辑。

修正后完整代码 #

<script>
  import { onMount } from 'svelte';

  let press = 1200;
  let temp = 25;
  let densityCalculationPromise = null;

  // 等CoolProp完全初始化后再执行物性计算
  function getXenonDensity() {
    return new Promise((resolve, reject) => {
      window.CoolProp.ready
        .then(CPInstance => {
          const densityVal = CPInstance.PropsSI(
            "D",
            "P", press * 6894.75729,
            "T", 273.15 + temp,
            "Xenon"
          );
          resolve(densityVal);
        })
        .catch(err => reject(err));
    });
  }

  onMount(() => {
    const coolpropScript = document.createElement('script');
    // 静态资源统一从public目录根路径引用，避免构建时路径错误
    coolpropScript.src = '/coolprop.js';
    coolpropScript.onload = () => {
      // 脚本加载完成后，启动计算流程
      densityCalculationPromise = getXenonDensity();
    };
    document.head.appendChild(coolpropScript);
  });
</script>

<main>
  {#if densityCalculationPromise}
    {#await densityCalculationPromise}
      <h1>物性计算加载中...</h1>
    {:then value}
      <p>压力参数 {press}，温度参数 {temp}，氙气密度 {value}</p>
    {/await}
  {:else}
    <h1>资源加载中...</h1>
  {/if}
</main>

额外避坑提示 #

• 不要在代码中通过相对路径引用../public/下的静态资源，生产构建时该路径会失效，public目录下的资源统一通过根路径/资源名访问。
• 不要在CoolProp初始化完成前就调用PropsSI方法，否则会出现随机的初始化失败问题，和HMR时碰巧可用的现象本质是时序不匹配导致的。

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