React/TypeScript如何根据URL参数动态导入TS文件

我正在使用react-pdf-highlighter项目，目前能根据URL的GET参数展示对应内容，但所有TypeScript文件都得预先引入。我想只根据URL的GET参数动态导入对应TS文件，不需要服务器支持，也不用加载全部文件，避免因加载所有文件导致的加载缓慢问题。

当前实现代码：

import type { IHighlight, NewHighlight } from "./react-pdf-highlighter";

const searchParams = new URLSearchParams(document.location.search);
const bookcode = searchParams.get("kode_buku");
const anotator = searchParams.get("kode_reviewer");
console.log(bookcode);

const mydir = "./" + bookcode;
let str_anotator = String(anotator);


import { testHighlights as _john } from "./anotasi/john";
import { testHighlights as _joe } from "./anotasi/joe";
import { testHighlights as _leo } from "./anotasi/leo";
import { testHighlights as _cristiano } from "./anotasi/cristiano";
import { testHighlights as _bujang } from "./anotasi/bujang";
import { testHighlights as _larry } from "./anotasi/larry";

import { Spinner } from "./Spinner";
import { Sidebar } from "./Sidebar";
import "./style/App.css";

let testHighlights: Record<string, Array<IHighlight>> = _raditya; // 原代码存在未导入的变量，推测为笔误

if (anotator == "john") { testHighlights = _john }
if (anotator == "joe") { testHighlights = _joe }
if (anotator == "leo") { testHighlights = _leo }
if (anotator == "cristiano") { testHighlights = _cristiano }
if (anotator == "bujang") { testHighlights = _bujang }
if (anotator == "larry") { testHighlights = _larry }


console.log(testHighlights);

用ES原生的动态导入语法import()即可实现需求，Webpack、Vite这类主流打包工具会自动把每个注释者的文件拆成独立代码块，只有需要时才加载对应文件，完全不需要服务器额外支持。

修改后的代码示例：

import type { IHighlight, NewHighlight } from "./react-pdf-highlighter";
import { Spinner } from "./Spinner";
import { Sidebar } from "./Sidebar";
import "./style/App.css";

// 初始化状态，处理加载/错误场景
let testHighlights: Record<string, Array<IHighlight>> | null = null;
let isLoading = true;
let loadError: Error | null = null;

const searchParams = new URLSearchParams(document.location.search);
const anotator = searchParams.get("kode_reviewer");

// 定义合法的注释者列表，防止非法参数导致路径错误
const validAnotators = ["john", "joe", "leo", "cristiano", "bujang", "larry"];

// 动态加载对应高亮数据的函数
const loadTargetHighlights = async () => {
  if (!anotator || !validAnotators.includes(anotator)) {
    loadError = new Error("无效的注释者参数");
    isLoading = false;
    return;
  }

  try {
    // 根据参数动态导入对应模块
    const targetModule = await import(`./anotasi/${anotator}`);
    testHighlights = targetModule.testHighlights;
  } catch (err) {
    loadError = err as Error;
  } finally {
    isLoading = false;
  }
};

// 触发加载
loadTargetHighlights();

// 后续可根据isLoading、loadError、testHighlights状态处理UI渲染
// 例：加载中显示Spinner，错误显示提示，成功则渲染高亮内容
console.log(testHighlights);

核心说明： #

• 移除了所有预先导入的注释者文件，换成import()动态加载，只有参数匹配时才会请求对应文件
• 增加合法参数校验，避免非法值导致加载错误路径的文件
• 用async/await处理异步加载，同时维护加载/错误状态，方便UI层面做对应提示
• 打包工具会自动拆分代码，每个./anotasi/xxx.ts都会生成独立的chunk文件，真正实现按需加载

内容的提问来源于stack exchange，提问作者Aris S