Question

大多数时候，我都会导入如下所示的模块。

import * as fs from "fs"

const Reporter = {
    createDirectory: (dir) => {
        if (!fs.existsSync(dir)) {
            mkdirp.sync(dir)
        }
    }
}

但是我看到一些开发人员/教程在功能调用内或仅在以下所需方法上导入模块。

const Reporter = {
    import * as fs from "fs"

    createDirectory: (dir) => {
        if (!fs.existsSync(dir)) {
            mkdirp.sync(dir)
        }
    }
}

哪个是最佳做法？
两种方式同时使用的优点/缺点是什么？

Answer 1

第二种方法（在Reporter的声明中）是不正确的语法。

静态导入语句必须始终位于模块的顶部。

也许您将静态导入与动态导入混淆了。动态导入在变量声明中可以，并且看起来像这样，例如：

const Reporter = {
    createDirectory: (dir) => {
        import("fs").then(fs => {
            if (!fs.existsSync(dir)) {
                mkdirp.sync(dir)
            }
        });
    }
}

使用动态模块的优点是您可以使用诸如webpack之类的工具来进行code splitting，即，将初始javascript捆绑包的大小优化为首次呈现页面时所需的代码。动态导入仅在需要时才从其他包异步加载。

根据Mozilla Developer Network documentation，如果不使用代码拆分，建议采用静态导入。

导入模块的最佳做法是哪种？

1 个答案: