Какова наилучшая практика при импорте модуля?

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)
        }
    }
}

1. Какая лучшая практика?
2. В чем преимущества / недостатки использования обоих способов?

Answer 1

Второй способ (внутри объявления Reporter) - неправильный синтаксис.

Статические операторы импорта всегда должны быть в верхней части модуля.

Возможно, вы путаете статическое с динамическим импортом. Динамический импорт будет в порядке в объявлении переменной и будет выглядеть так, например:

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

Преимущество использования динамических модулей состоит в том, что вы можете использовать такие инструменты, как веб-пакет, для выполнения разбиения кода , т. Е. Оптимизировать размер вашего исходного комплекта javascript под код, который необходим при первом отображении страницы. Динамический импорт загружается асинхронно из других пакетов только при необходимости.

Если вы не используете разделение кода, рекомендуется статический импорт, согласно документации Mozilla Developer Network .