如何在Vue.js中阻止页面加载前加载不必要的脚本文件？

你之前用Vue生命周期钩子修改src的方法无效，核心原因是钩子执行时脚本请求已经发起，必须在脚本加载前完成拦截。以下是几个可行的落地方案：

1. 用MutationObserver提前拦截动态插入的脚本 #

低代码平台通常会动态向DOM插入脚本标签，你可以在Vue初始化前就启动DOM监控，一旦发现目标脚本就立即移除，彻底阻止其加载。

在项目的public/index.html里，把这段代码放在所有其他脚本（包括Vue入口脚本）之前：

// 匹配目标脚本的URL特征
const targetScriptPattern = /bootstrap/i;

// 创建DOM变化观察者
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes) {
      mutation.addedNodes.forEach((node) => {
        // 检查是否是要拦截的script标签
        if (node.tagName === 'SCRIPT' && node.src && targetScriptPattern.test(node.src)) {
          node.remove();
          observer.disconnect(); // 拦截后断开观察者，避免重复处理
        }
      });
    }
  });
});

// 启动监控，监听整个文档的子节点变化
observer.observe(document.documentElement, {
  childList: true,
  subtree: true
});

2. 用Fetch拦截器阻断脚本请求 #

如果部分脚本是通过Fetch/XHR动态加载的，可以全局拦截请求，直接阻断目标资源的获取：

同样在public/index.html头部添加这段代码：

// 保存原生Fetch方法
const originalFetch = window.fetch;

window.fetch = async (...args) => {
  const url = args[0];
  // 匹配bootstrap相关资源
  if (typeof url === 'string' && /bootstrap/i.test(url)) {
    // 返回空响应，阻断加载
    return new Response('', { status: 200 });
  }
  // 其他请求正常放行
  return originalFetch(...args);
};

注意：这个方法对传统script标签直接加载的资源无效，建议和第一种方案配合使用。

3. 优先查看低代码平台的内置配置 #

这是最彻底的解决方式：多数低代码平台会提供依赖管理或全局资源配置面板，你可以在后台找到Bootstrap这类内置库的开关，直接禁用它。从源头阻止平台注入脚本，比前端拦截更高效稳定。

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