如何从其他脚本加载TypeScript的Tracker类？实现与性能分析

我来帮你梳理下这个场景下的实现方案、可行性和性能影响，以及解决你遇到的模块警告问题：

一、如何实现从另一个脚本导入Tracker类 #

1. 把tracker.ts改成ES模块 #

首先要解决「tracker.ts不是模块」的警告——只要在文件中导出Tracker类，它就会被识别为ES模块：

// tracker.ts
// 确保正确导入AWS SDK（如果用的是npm包）
import AWS from 'aws-sdk';

// 导出Tracker类，供其他脚本导入
export class Tracker {
  private projectId: string;
  private apiKey: string;

  // 把projectId和apiKey通过构造函数传入，替代原来从URL参数读取的方式（更灵活）
  constructor(projectId: string, apiKey: string) {
    this.projectId = projectId;
    this.apiKey = apiKey;
    // 初始化AWS Kinesis逻辑
    AWS.config.update({
      // 你的AWS配置，比如region等
    });
  }

  // 发送事件到Kinesis的方法
  sendEvent(eventData: Record<string, any>) {
    // 这里是你已有的发送逻辑，比如创建Kinesis实例并调用putRecord
    const kinesis = new AWS.Kinesis();
    kinesis.putRecord({
      Data: JSON.stringify(eventData),
      StreamName: `your-stream-${this.projectId}`,
      PartitionKey: this.apiKey.slice(0, 8)
    }, (err, data) => {
      if (err) console.error('发送失败:', err);
      else console.log('发送成功:', data);
    });
  }
}

// 可选：兼容原来的全局脚本引入方式（如果还要支持旧用法）
if (typeof window !== 'undefined') {
  // 从当前页面URL参数读取配置（和原来的逻辑一致）
  const urlParams = new URLSearchParams(window.location.search);
  const projectId = urlParams.get('projectId');
  const apiKey = urlParams.get('apiKey');
  
  if (projectId && apiKey) {
    // 挂载到window上，让全局脚本能访问
    (window as any).TrackerInstance = new Tracker(projectId, apiKey);
  }
}

2. 在另一个脚本中导入并使用 #

你的导入脚本需要声明为type="module"，然后直接导入Tracker类，手动传入配置参数（不用依赖脚本URL的参数，更可控）：

<!-- 页面中的导入脚本 -->
<script type="module">
  // Parcel会自动处理这个导入，打包成正确的编译后文件
  import { Tracker } from './tracker.ts';

  // 获取配置参数——可以从URL、localStorage或者其他地方获取
  const urlParams = new URLSearchParams(window.location.search);
  const projectId = urlParams.get('projectId');
  const apiKey = urlParams.get('apiKey');

  if (projectId && apiKey) {
    // 初始化Tracker实例
    const tracker = new Tracker(projectId, apiKey);

    // 这里添加你的DOM事件监听逻辑，比如点击事件
    document.addEventListener('click', (e) => {
      tracker.sendEvent({
        type: 'user_click',
        target: e.target.tagName,
        timestamp: Date.now()
      });
    });
  }
</script>

3. 解决「type改为module无效」的问题 #

你之前改type="module"无效，大概率是因为：

• tracker.ts没有导出任何内容，被浏览器当作普通脚本而非模块；
• 原来的代码依赖全局变量（比如直接用AWS却没导入），模块作用域下无法访问全局未声明的变量；
• 其他脚本没有同时改成模块（模块脚本和普通脚本的作用域隔离，不能互相访问全局变量）。

按照上面的方式改成模块后，这些问题都会解决。

二、可行性分析 #

完全可行，理由如下：

• 现代浏览器100%支持ES模块，Parcel对ES模块的打包支持非常成熟；
• 这种模块方式比原来的全局脚本更符合现代前端开发规范，代码作用域隔离，避免全局变量污染；
• 可以灵活传递配置参数，不用依赖脚本URL的查询参数（当然也可以保留兼容逻辑）；
• 如果你需要在多个脚本中复用Tracker类，模块导入是最标准的方式。

三、性能影响 #

整体是正向提升，具体体现在：

1. Tree Shaking优化：Parcel会自动分析模块依赖，只打包你实际用到的代码（比如如果Tracker类中有未使用的方法，会被剔除），减少最终打包体积；
2. 代码分割：如果你的项目有多个模块，Parcel会自动进行代码分割，按需加载，降低初始页面的加载时间；
3. 缓存友好：模块打包后的文件名会带有哈希（比如tracker.568463.js），浏览器会缓存未修改的文件，后续访问加载更快；
4. 运行时效率：模块的作用域隔离避免了全局变量冲突，减少了运行时的潜在错误，间接提升页面稳定性。

唯一需要注意的是：如果你的tracker.ts本身体积很大，初始加载时间和原来差不多，但Parcel的压缩、缓存等优化会抵消这部分影响。

内容的提问来源于stack exchange，提问作者Luzan Baral