如何使用 React 在资源（.json、.csv 等）上使用代码拆分

Question

问题：

我正在使用 react-intl 我想加载与语言相关的 JSON 文件 只有当它是需要的，简而言之延迟加载它。

文档：

https://reactjs.org/docs/code-splitting.html 这里的问题是我希望延迟加载 JSON 文件而不是组件，所以我对如何在没有 JSX 的情况下使用它有点迷茫。

实际代码：

import React from 'react';
import {IntlProvider} from 'react-intl';
import English from "../i18n/en.json";
import Polish from "../i18n/pl.json";

const local = navigator.language;
let lang;
switch (local){
    case "pl":
    case "pl-pl":
        lang = Polish;
        break;
    default:
        lang = English;
}

function Wrapper () {
[...]
}

export default Wrapper

我试过的方法没有有效：

测试 1：

import React from 'react';
import {IntlProvider} from 'react-intl';
const English = React.lazy(() => import('../i18n/en.json'));
const Polish = React.lazy(() => import('../i18n/pl.json'));

const local = navigator.language;
let lang;
switch (local){
    case "pl":
    case "pl-pl":
        lang = Polish;
        break;
    default:
        lang = English;
}

function Wrapper () {
[...]
}

export default Wrapper

测试 2：

import React from 'react';
import {IntlProvider} from 'react-intl';
const English = React.lazy(() => import('../i18n/en.json'));
const Polish = React.lazy(() => import('../i18n/pl.json'));

const local = navigator.language;
let lang;
switch (local){
    case "pl":
    case "pl-pl":
        Polish.then(polish => {lang = polish});
        break;
    default:
        English.then(english=> {lang = english});
}

function Wrapper () {
[...]
}

export default Wrapper

测试 3（灵感来自）：

import React from 'react';
import {IntlProvider} from 'react-intl';

const local = navigator.language;
let lang;
switch (local){
    case "pl":
    case "pl-pl":
        import("../i18n/pl.json").then(Polish=> {
            lang = Polish);
        });
        break;
    default:
        import("../i18n/en.json").then(English=> {
            lang = English);
        });
}

function Wrapper () {
[...]
}

export default Wrapper

如果需要更多代码（例如 Wrapper 函数），请在评论中告诉我:)

Answer 1

我也遇到了同样的问题，我想在 React 中对 JSON 进行代码拆分。我找到了一个使用动态导入功能的解决方法。

我没有使用 Intl，所以我无法确认这是否满足您的需求，但这正是满足我的需求的方法（我认为它应该适合您）

我创建了一个函数来 return 对我需要编码拆分的数据作出承诺。然后我在我的组件中调用了异步函数并等待数据。

我的用例是从 API 中获取数据，如果已完成，则加载缓存的 JSON 数据。

const loadCached = (key) => {
  return new Promise((res, rej) => {
    import(`../datasets/cached/${key}.json`).then((data) => {
      res(data?.default);
    });
  });
};

然后我从 async catch

中调用了它

const cachedData = await loadCached(key);

所以为了您的使用，我会保留我的 loadCached 功能（也许将其重命名为 loadLang）

然后将其包裹在 useEffect 中以在加载时触发以更改语言并收集 JSON。

以下是我将如何处理您的问题（未经测试的代码）

const local = navigator.language; // get language
const [lang, setLang] = useState("English"); // for a default of english

// fire when we get local from DOM
useEffect(() => {
  async function getLangData() {
    const response = await loadLang(local);
    setLang(reponse);
  }
getLangData();
}, [local])


const setLang = (lang) => {
  return new Promise((res, rej) => {
    import(`../i18n/${lang}.json`).then((data) => {
      res(data?.default);
    });
  });
};

如何使用 React 在资源（.json、.csv 等）上使用代码拆分

How to use code splitting on a ressouce (.json, .csv, etc.) with React

json

reactjs

react-intl

问题：

文档：

实际代码：

我试过的方法没有有效：