仅动态导入模块一次，而不是在 React 中的每个组件实例上答案

【问题标题】：Only dynamically import module once rather than on every component instance in React仅动态导入模块一次，而不是在 React 中的每个组件实例上
【发布时间】：2019-01-18 01:38:24
【问题描述】：

我有一个有条件地导入模块的反应组件。原因是如果模块在文件顶部正常导入，这会破坏依赖该组件的另一个项目的 webpack 构建，因为它无法处理导入的模块。

我已经通过 es6 动态导入解决了这个问题 - 但是，现在的问题是组件的每个实例都重新导入了模块。如果我在一页上有 100 个组件，它会将该模块导入 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>)
    }
}

【问题讨论】：

所以分码不支持你的要求？
@RandyCasburn 您能否详细说明我如何在这种情况下使用代码拆分？
文档在这方面做得非常好：reactjs.org/docs/code-splitting.html#code-splitting

标签： javascript reactjs ecmascript-6

【解决方案1】：

我不确定动态导入的模块是否被缓存。如果不是，您可以导出一个承诺，如果设置了标志，则该承诺会解析动态导入的 gatsby。您仍然需要在使用 gatsby 的每个组件中导入并调用它，但它不会每次都动态导入模块。

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

export default conditionallyResolveGatsby();

你也可以尝试使用require。

【讨论】：