时间戳

首页 > 解决方案 > 仅动态导入模块一次，而不是在 React 中的每个组件实例上

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

问题描述

我有一个有条件地导入模块的反应组件。原因是如果模块在文件顶部正常导入，这会破坏依赖该组件的另一个项目的 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>)
    }
}

标签： javascriptreactjsecmascript-6

解决方案

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

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

export default conditionallyResolveGatsby();

你也可以尝试使用require。

推荐阅读