如何在Vite创建的React项目中隐藏index.html中的外部资源链接？

我用Vite创建了一个React项目，当前index.html文件里包含多个外部字体、库的<link>和<script>链接：

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

我想把这些链接从index.html中隐藏，试过在public文件夹创建head.html，然后用<link rel="import" href="/head.html"/>引入，但这个方法没效果。请问怎么实现这个需求？

可行方案 #

方案1：通过JavaScript动态注入资源（无需额外配置） #

直接在项目入口文件（如src/main.jsx）中编写代码，动态创建并插入资源标签到页面<head>，彻底脱离index.html的直接引用：

// src/main.jsx
const injectExternalResources = () => {
  // 注入link标签
  const links = [
    { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
    { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
    { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap' },
    { rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' },
    { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' }
  ];

  links.forEach(linkProps => {
    const link = document.createElement('link');
    Object.assign(link, linkProps);
    document.head.appendChild(link);
  });

  // 注入script标签
  const scripts = [
    'https://code.jquery.com/jquery-1.11.1.min.js',
    'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js'
  ];

  scripts.forEach(src => {
    const script = document.createElement('script');
    script.src = src;
    // 若需脚本加载后执行逻辑，可添加onload事件
    // script.onload = () => { /* 自定义逻辑 */ };
    document.head.appendChild(script);
  });
};

// 在React应用初始化前完成资源注入
injectExternalResources();

// 原有React渲染代码
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

方案2：使用Vite的HTML片段导入（需配置插件） #

通过posthtml-include插件实现HTML片段拆分导入，保持index.html简洁：

1. 安装插件：

npm install posthtml-include --save-dev

2. 配置vite.config.js：

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import posthtmlInclude from 'posthtml-include';

export default defineConfig({
  plugins: [
    react(),
    {
      name: 'posthtml-include',
      transformIndexHtml(html) {
        return posthtmlInclude()(html);
      }
    }
  ]
});

3. 在public目录创建head-snippets.html，存放需要隐藏的资源链接：

<!-- public/head-snippets.html -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

4. 在index.html中用include指令导入片段：

<!-- index.html -->
<head>
  <!-- 原有head内容 -->
  <include src="/head-snippets.html"></include>
</head>

方案3：使用vite-plugin-html插件注入资源 #

通过vite-plugin-html在构建/开发时自动注入资源，完全脱离index.html手动编写：

1. 安装插件：

npm install vite-plugin-html --save-dev

2. 配置vite.config.js：

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { createHtmlPlugin } from 'vite-plugin-html';

export default defineConfig({
  plugins: [
    react(),
    createHtmlPlugin({
      inject: {
        headTags: [
          '<link rel="preconnect" href="https://fonts.googleapis.com" />',
          '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />',
          '<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap" rel="stylesheet" />',
          '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />',
          '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />',
          '<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>',
          '<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>'
        ]
      }
    })
  ]
});

为什么<link rel="import">无效？ #

<link rel="import">是已废弃的HTML Imports特性，目前主流浏览器（Chrome 73+、Firefox、Safari等）均不再支持，因此该导入方式已失效。

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