Webpack動態導入.json文件？

Question

我將 React Intl 用於 x 種語言（下面的示例），目前我在設置我的應用程序的地方導入以下內容：

import { addLocaleData } from 'react-intl';
import locale_en from 'react-intl/locale-data/en';
import locale_de from 'react-intl/locale-data/de';

import messages_en from './translations/en.json';
import messages_de from './translations/de.json';

addLocaleData([...locale_en, ...locale_de]);

...
export const messages = {
    en: messages_en,
    de: messages_de
}

由於無論使用哪種語言都會導入這些語言文件，因此我的主捆綁 js 文件變得非常大，尤其是來自 .json 文件。

如何使用 Webpack 拆分這些語言文件（或使用 CopyWebpackPlugin 將它們復制到我的 dist 文件夾），然后根據當前使用的語言動態導入它們？

該應用程序是同構的，因此相同的代碼正在服務器上運行。

Answer 1

我最近一直在做類似的事情，盡管我的項目不需要 SSR。 我發現將動態導入語法與 React 的 Suspense 組件配對可以達到預期的效果。 這是我發現的工作的粗略概述，至少在我的情況下，其中不包括 SSR：

// wrap this around your JSX in App.js:
<React.Suspense fallback={<SomeLoadingComponent />}>
  <AsyncIntlProvider>
    {/* app child components go here */}
  </AsyncIntlProvider>
</React.Suspense>

// the rest is in support of this
// can be placed in another file
// simply import AsyncIntlProvider in App.js

const messagesCache = {};

const AsyncIntlProvider = ({ children }) => {
  // replace with your app's locale getting logic
  // if based on a hook like useState, should kick off re-render and load new message bundle when locale changes (but I haven't tested this yet)
  const locale = getLocale();

  const messages = getMessages(locale);
  return (
    <IntlProvider locale={locale} messages={messages}>
      {children}
    </IntlProvider>
  );
};

function getMessages(locale) {
  if (messagesCache[locale]) {
    return messagesCache[locale];
  }
  // Suspense is based on ErrorBoundary
  // throwing a promise will cause <SomeLoadingComponent /> to render until the promise resolves
  throw loadMessages(locale);
}

async function loadMessages(locale) {
  // dynamic import syntax tells webpack to split this module into its own chunk
  const messages = await import('./path/to/${locale}.json`);
  messagesCache[locale] = messages;
  return messages;
}

Webpack 應該將每個語言環境 JSON 文件拆分為自己的塊。 如果沒有，則可能在動態導入語法到達 webpack 之前將其轉換為不同的模塊系統（require 等）。 例如：如果使用 Typescript，tsconfig 需要"module": "esnext"來保留import()語法。 如果使用 Babel，它也可能會嘗試進行模塊轉譯。

單個語言環境的塊 output 看起來像這樣； 絕對比通過 CopyWebpackPlugin 實現的要多：

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{

/***/ "./path/to/en-US.json":
/*!*************************************!*\
  !*** ./path/to/en-US.json ***!
  \*************************************/
/*! exports provided: message.id, default */
/***/ (function(module) {

eval("module.exports = JSON.parse(\"{\\\"message.id\\\":\\\"Localized message text\\\"}\");//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvbG9jYWxpemF0aW9uL2VuLVVTLmpzb24uanMiLCJzb3VyY2VzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./path/to/en-US.json\n");

/***/ })

}]);

希望這是一個很好的起點，可以與 SSR 一起使用，也可以修改為與 SSR 一起使用。 請報告您在該主題上的發現。