在前端项目中，随着功能迭代，我们可能需要动态移除已经加载的HTML5模块，逐个卸载的方式能更精准地控制资源释放，避免不必要的内存占用。不同的模块加载方式对应不同的卸载逻辑，下面会分场景说明具体操作方法。
原生ES模块逐个卸载方法
如果是通过原生<script type="module">标签加载的HTML5模块，卸载的核心是移除对应的script标签，并清理模块相关的引用。需要注意的是，原生ES模块加载后会有模块缓存，移除标签后还需要手动清理缓存引用。
操作步骤
- 获取需要卸载的模块对应的script标签元素
- 从DOM中移除该script标签
- 清理模块内部注册的全局事件、定时器等副作用
- 将模块相关的引用变量设为null，方便垃圾回收
代码示例
// 假设页面中有一个id为module1的模块script标签
<script type="module" id="module1">
// 模块内部逻辑
let timer = setInterval(() => {
console.log('模块1运行中');
}, 1000);
// 暴露清理方法给外部
window.cleanModule1 = () => {
clearInterval(timer);
timer = null;
};
</script>
// 卸载模块1的逻辑
function unloadModule1() {
// 调用模块内部的清理方法，清除副作用
if (window.cleanModule1) {
window.cleanModule1();
window.cleanModule1 = null;
}
// 移除script标签
const moduleScript = document.getElementById('module1');
if (moduleScript) {
moduleScript.remove();
}
}
使用模块加载器时的卸载方法
如果项目中使用了RequireJS、SystemJS这类模块加载器来管理HTML5模块，卸载逻辑需要遵循对应加载器的API规范，不能直接操作DOM标签。
SystemJS模块卸载示例
SystemJS是常用的动态模块加载器，支持模块的注册和卸载，下面是逐个卸载SystemJS加载的模块的代码：
// 假设已经通过SystemJS加载了一个名为app/module1的模块
System.import('app/module1').then((module) => {
// 模块加载后的逻辑
module.init();
// 保存模块引用方便后续卸载
window.currentModule1 = module;
});
// 卸载该模块的方法
function unloadSystemModule() {
// 调用模块内部的销毁方法
if (window.currentModule1 && typeof window.currentModule1.destroy === 'function') {
window.currentModule1.destroy();
}
// 从SystemJS的模块注册表中移除该模块
System.delete('app/module1');
// 清理引用
window.currentModule1 = null;
}
卸载时的注意事项
- 必须先清理模块内部的副作用，比如事件监听、定时器、WebSocket连接等，再移除模块引用，否则会导致内存泄漏
- 如果模块导出了全局变量，卸载后需要手动将这些全局变量设为null
- 对于依赖其他模块的HTML5模块，卸载前需要确认依赖模块是否还在使用，避免影响其他功能
- 如果是通过动态创建script标签加载的非模块化脚本，卸载时除了移除标签，还要清理脚本执行时添加的全局函数和变量
常见问题解答
卸载模块后还是能访问到模块内的变量怎么办
这是因为模块执行时把变量挂载到了全局作用域，需要在模块内部提供销毁方法，主动将这些全局变量清空，或者在卸载逻辑中手动删除对应的全局属性。
原生ES模块移除script标签后为什么还能执行模块内的函数
原生ES模块的代码执行后会留在内存中，除非没有引用且触发垃圾回收，所以需要在模块内部预留清理接口，在移除标签前先执行清理操作，避免残留逻辑运行。
HTML5模块卸载前端开发JavaScript修改时间：2026-07-22 09:09:22