Обновление
Я посетил веб-сайт и уверен, что вы используете Gatsby. Gatsby использует SSR, а React.lazy и Suspense еще не доступны для рендеринга на стороне сервера. Если вы хотите выполнить разделение кода в приложении, отображаемом на сервере, рекомендуется Загружаемые компоненты в React docs . В нем есть прекрасное руководство по разделению пакетов с рендерингом на стороне сервера .
Есть плагин gatsby, чтобы облегчить вашу жизнь gatsby-plugin-loadable-components-ssr . После установки и настройки плагина вы можете использовать loadable следующим образом:
AmazonFrame.js
import React from "react";
const AmazonFrame = ({ src, width, height }) => (
<iframe src={src} width={width} height={height} scrolling="no"></iframe>
);
App.js
import React from "react";
import loadable from "@loadable/component";
const AmazonFrame = loadable(() => import("./AmazonFrame"), {
fallback: <div>Loading...</div>
});
function App() {
return (
<div>
<AmazonFrame src="src" width="100%" height="200px" />
</div>
);
}
export default App;
или
import React from "react";
import loadable from "@loadable/component";
const AmazonFrame = loadable(() => import("./AmazonFrame"));
function App() {
return (
<div>
<AmazonFrame fallback={<div>Loading...</div>} />
</div>
);
}
export default App;
Исходный ответ
Вам нужно использовать Code-Splitting . Разделение кода - это функция, поддерживаемая такими сборщиками, как Webpack, Rollup и Browserify (через factor-bundle), которые могут создавать несколько пакетов, которые могут динамически загружаться во время выполнения.
Если вы используете приложение Create React, это уже настроено для вас, и вы можете начать его использовать немедленно.
Разделение кода вашего приложения может помочь вам «отложить загрузку» только тех вещей, которые в настоящее время необходимы пользователю, что может значительно повысить производительность вашего приложения. Хотя вы не уменьшили общий объем кода в своем приложении, вы избежали загрузки кода, который может никогда не понадобиться пользователю, и уменьшили количество кода, необходимого во время начальной загрузки.
Вот пример решение вашей проблемы, которое будет лениво загружать рекламу Amazon iframe, поэтому она не будет загружена с вашим начальным пакетом:
AmazonFrame.js
import React from "react";
const AmazonFrame = ({ src, width, height }) => (
<iframe src={src} width={width} height={height} scrolling="no"></iframe>
);
export default AmazonFrame;
App.js
import React, { Suspense, lazy } from "react";
// React.lazy takes a function that must call a dynamic import(). This must return a Promise
// which resolves to a module with a default export containing a React component.
const AmazonFrame = lazy(() => import("./AmazonFrame"));
function App() {
return (
<div>
{/* The lazy component should then be rendered inside a Suspense component, which allows us to show some fallback
content (such as a loading indicator) while we’re waiting for the lazy component to load */}
{/* The fallback prop accepts any React elements that you want to render while waiting for the component to load */}
<Suspense fallback={<div>Loading...</div>}>
<AmazonFrame src="src" width="100%" height="200px" />
</Suspense>
</div>
);
}
export default App;