如何在ReactJS编译阶段加载原始.Tex等本地文件

步骤1：完善Webpack配置（覆盖所有目标文件类型） #

你现有的raw-loader配置只支持.txt和.tex文件，需要扩展规则以匹配所有需要预加载的文件类型：

module.exports = override(
  addWebpackModuleRule({
    test: /\.(cls|sty|tex|map|pfb)$/,
    use: 'raw-loader'
  })
);

注意：如果是.pfb这类二进制字体文件，raw-loader会以字符串形式加载；若需要处理二进制内容，可改用file-loader或url-loader，根据实际需求调整。

步骤2：创建预加载文件清单（编译时打包进Bundle） #

新建一个模块统一导入所有目标文件，让Webpack在编译阶段就把这些文件内容打包进项目，彻底避免运行时的fetch请求：

// src/preloadedFiles.js
// 请替换为你实际的文件路径
import articleCls from './assets/files/article.cls';
import chemfigSty from './assets/files/chemfig.sty';
import chemfigTex from './assets/files/chemfig.tex';
import ckxMap from './assets/files/ckx.map';
import cmr10 from './assets/files/cmr10';
import cmr10Pfb from './assets/files/cmr10.pfb';
import pgfkeysfilteredCodeTex from './assets/files/pgfkeysfiltered.code.tex';
import pgfkeysSty from './assets/files/pgfkeys.sty';
import pgflibraryarrowsMetaCodeTex from './assets/files/pgflibraryarrows.meta.code.tex';
import pgflibraryplothandlersCodeTex from './assets/files/pgflibraryplothandlers.code.tex';
import pgfmathcalcCodeTex from './assets/files/pgfmathcalc.code.tex';
import pgfmathCodeTex from './assets/files/pgfmath.code.tex';

// 以文件名作为key存储内容，方便后续校验
export const preloadedFiles = {
  'article.cls': articleCls,
  'chemfig.sty': chemfigSty,
  'chemfig.tex': chemfigTex,
  'ckx.map': ckxMap,
  'cmr10': cmr10,
  'cmr10.pfb': cmr10Pfb,
  'pgfkeysfiltered.code.tex': pgfkeysfilteredCodeTex,
  'pgfkeys.sty': pgfkeysSty,
  'pgflibraryarrows.meta.code.tex': pgflibraryarrowsMetaCodeTex,
  'pgflibraryplothandlers.code.tex': pgflibraryplothandlersCodeTex,
  'pgfmathcalc.code.tex': pgfmathcalcCodeTex,
  'pgfmath.code.tex': pgfmathCodeTex,
};

步骤3：实现本地文件校验与缺失下载逻辑 #

在组件中利用localStorage持久化已下载的文件，对比预加载清单，只处理本地没有的文件：

import React, { useEffect } from 'react';
import './App.css';
import { preloadedFiles } from './preloadedFiles';

// 检查本地存储，缺失则保存文件
const checkAndSaveMissingFiles = () => {
  Object.entries(preloadedFiles).forEach(([fileName, fileContent]) => {
    const storedFile = localStorage.getItem(fileName);
    if (!storedFile) {
      // 这里可根据需求调整：比如保存到localStorage，或触发浏览器下载
      localStorage.setItem(fileName, fileContent);
      console.log(`已保存文件到本地：${fileName}`);
    }
  });
};

function App() {
  useEffect(() => {
    // 组件挂载时执行校验逻辑
    checkAndSaveMissingFiles();
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <h1>文件预加载校验完成</h1>
      </header>
    </div>
  );
}

export default App;

核心要点说明 #

• 编译时打包：通过raw-loader导入文件，Webpack会在编译阶段将文件内容嵌入JS Bundle，完全消除运行时的fetch请求。
• 本地存储复用：用localStorage持久化文件，每次页面加载只处理缺失文件，避免重复操作。
• 二进制文件适配：如果.pfb等二进制文件需要以Blob形式存储，可将raw-loader替换为file-loader，将文件转为URL后再进行存储处理。

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