Только динамически импортировать модуль один раз, а не на каждый экземпляр компонента в React

Question

У меня есть компонент реагирования, который условно импортирует модуль. Причина в том, что если модуль обычно импортируется вверху файла, это нарушает сборку веб-пакета другого проекта, которая зависит от этого компонента, поскольку он не может обработать импортированный модуль.

Я решил эту проблему с помощью динамического импорта es6, однако теперь проблема заключается в том, что каждый экземпляр компонента повторно импортирует модуль. Если у меня будет 100 компонентов на 1 странице, он будет импортировать этот модуль 100 раз, что сделает его неэффективным и замедлит время загрузки страницы.

Как правильно импортировать его только один раз, а остальные экземпляры компонентов должны ссылаться на 1 динамически импортируемый модуль?

Вот мой компонент:

import React from "react"

export default class Link extends React.Component {
    state = {
        gatsbyLink: null
    }

    ...
    componentDidMount() {
        if (GLOBAL_FLAG) {
            import("gatsby").then(({ Link }) => {
                this.setState({
                    gatsbyLink: Link
                })
            })
        }
    }

    render() {
        const { gatsbyLink } = this.state;
        const GatsbyLink = gatsbyLink ? gatsbyLink : "";

        ...

        return (<GatsbyLink {...}>...</GatsbyLink>)
    }
}

Answer 1

Я не уверен, что динамически импортированные модули кэшируются. Если это не так, вы можете экспортировать обещание, которое разрешает динамически импортируемый gatsby, если установлен флаг. Вам все равно придется импортировать и вызывать его в каждом компоненте, где вы используете gatsby, но он не будет динамически импортировать модуль каждый раз.

const conditionallyResolveGatsby = () => {
   // You could reject as well
   return GLOBAL_FLAG ? import('gatsby') : Promise.resolve(); 
};

export default conditionallyResolveGatsby();

Вы также можете попробовать использовать require.