如何组织大量JavaScript函数实现单文件动态按需加载

直接使用ES标准的动态import()语法即可实现需求，不需要提前导入所有习题函数，支持基于变量动态加载对应文件，同时可以完全拆分单文件到独立模块。

第一步：调整目录结构 #

将原来集中在exercise_helpers.js里的所有习题函数拆分到独立文件，统一放到专门的习题目录下，结构示例：

helpers/
├── exercise_helpers.js  # 后续做薄转发层，不存具体习题逻辑
└── exercises/
    ├── exercise1.js
    ├── exercise2.js
    ├── exercise3.js
    # 后续新增习题直接在该目录下新增对应文件即可

每个独立习题文件内只保留自身逻辑，用默认导出即可，以exercise1.js为例：

// helpers/exercises/exercise1.js
export default function exercise1() {
  // 原exercise1的所有题目生成、答案校验逻辑
}

第二步：动态按需加载调用 #

动态import()支持传入变量拼接的模块路径，构建工具（Vite/Webpack/Rollup等）会自动识别这类动态导入，将每个独立习题文件拆成单独的资源包，仅在调用时才会加载对应文件。

替换你原来的exerciseHelpers[thisExerciseFunction]()调用逻辑即可，注意要加合法名校验避免路径遍历风险：

// 白名单校验，仅允许exercise+数字的命名格式，防止恶意传入路径加载敏感文件
if (!/^exercise\d+$/.test(thisExerciseFunction)) {
  throw new Error('无效的习题标识');
}

// 动态加载当前需要的单个习题文件，不会加载其他无关习题资源
const { default: runExercise } = await import(`../helpers/exercises/${thisExerciseFunction}.js`);
// 执行习题逻辑
runExercise();

注意：动态import()是异步API，上述代码需要在async标记的函数内运行；如果无法使用async/await，也可以用.then()链式调用：

import(`../helpers/exercises/${thisExerciseFunction}.js`)
  .then(mod => mod.default())
  .catch(err => console.error('习题加载失败', err));

可选：保留原有入口调用习惯 #

如果不想在业务代码里重复写校验和导入逻辑，可以保留原来的exercise_helpers.js作为极薄的代理入口，文件内不写入任何具体习题逻辑，也不做全量导入，只封装加载方法：

// helpers/exercise_helpers.js
export async function loadExercise(exerciseName) {
  if (!/^exercise\d+$/.test(exerciseName)) {
    throw new Error('无效的习题标识');
  }
  const exerciseModule = await import(`./exercises/${exerciseName}.js`);
  return exerciseModule.default;
}

业务侧调用时只需要导入这个加载方法即可：

import { loadExercise } from "../helpers/exercise_helpers.js";
const runCurrentExercise = await loadExercise(thisExerciseFunction);
runCurrentExercise();

方案优势 #

• 维护性：每个习题独立成文件，单文件代码量可控，修改单个习题不会影响其他模块
• 性能：构建工具自动做代码分割，仅在用户访问对应习题时才加载对应资源，不会一次性加载数百个习题的全部代码
• 扩展性：新增习题只需要在exercises目录下按命名规范新增文件即可，不需要修改入口文件的导入/导出配置，没有额外维护成本

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