Как использовать импорт в js для разных файлов один раз?

Question

[Aricce]

Есть страница html к ней подключен мой файл js в котором используется импорт ThreeJS, чтобы не нагромождать во время разработки создал отдельный js файл с классами, но они тоже используют ThreeJS, получается я в обоих файлах их импортирую.

И вот вопрос возможно ли как-то глобально импортировать так, чтобы ThreeJS работал в обоих файлах, но не было необходимо прописывать его в каждом отдельном файле?(Да, на HTML страничке самой я прописывал ThreeJS тогда вообще не видит)
Для примера-как сейчас:

//file1.js
import * as THREE from './three.module.js'
class Test(){
//...constructor
var geometry = new THREE.Geometry();
}

//file2.js
import * as THREE from './three.module.js'
const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
var test = new Test();

И вот так я бы хотел:

//file1.js
class Test(){
//...constructor
var geometry = new THREE.Geometry();
}

//file2.js
const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
var test = new Test();

Либо в одном месте как-то подключить и передать.
В моем понимании импорт одной и той же библиотеки для разных файлов это просто захламление памяти, т.е. как я себе это представляю: есть 20 файлов, использующих 1 библиотеку, соответственно для каждого из них библиотека будет копироваться в память и получается у нас будет 40 файлов в памяти.

Answer 1

[Александр]

Вы можете использовать вебпак, чтобы собрать проект
Он вам может разбить ваш js на модули, библиотеку вынесет в отдельный файл
Вы хоть 100 раз импортруйте в разных js файлах в итоговом коде библиотека будет только в одном екземпляре

Comments

[Aricce]

Здравствуйте, спасибо за ответ, наверное так и поступлю

[Игорь Васильев]

Aricce, эту задачу лучше решать на TypeScript, но решать конечно вам, просто все библиотеки из NPM и YARN написаны на TypeScript, так что лучше сразу написать весь проект на одном языке, но он строго типизированный, придётся привыкать к новым правилам и ограничениям, тогда как JavaScript даёт полную свободу, но увеличивает шансы собрать баги и ошибки.

[Aricce]

Игорь Васильев, Здравствуйте, совершенно с ним не знаком, но он мне даже ближе (я больше по C#), спасибо большое, тоже попробую.

[Игорь Васильев]

Aricce,

(я больше по C#)

:) Можно по подробнее ?
Пишите в ЛС или звоните. ;)

Answer 2

[Alex]

В моем понимании импорт одной и той же библиотеки для разных файлов это просто захламление памяти, т.е. как я себе это представляю: есть 20 файлов, использующих 1 библиотеку, соответственно для каждого из них библиотека будет копироваться в память и получается у нас будет 40 файлов в памяти.

Ну, это не совсем так.

Если вы импортируете что-то из одного файла несколько раз, это не значит что браузер несколько раз загружает и обрабатывает модуль. Нет. Он загружается и испольняется один раз, и многократно передаёт вам из контекста то что вы импортируете. Так, что многократный импорт не приведёт у перегрузке памяти.
Но оптимизировать всё таки можно.

Вместо этого

import * as THREE from './three.module.js'
new THREE.PlaneBufferGeometry(planeSize, planeSize);

Делай вот так:

import {PlaneBufferGeometry} from './three.module.js'
new PlaneBufferGeometry(planeSize, planeSize);

Это даст очень мизерный эффект, но всё таки даст. Браузеру не нужно будет передавать в твой контект вообще всё, а только то, что импортировал. Но исходный файл всё равно будет загружаться и обрабатываться полностью.

Дальше, можно заюзать rollup.js
Вот с его то помозью вы и получите то, что хортите:
Он автоматически скопирует все ваши импорты в один файл, удалит всё что вы не импортируете и не используете. И итоговый результат намного меньше бандла webpack

Comments

[Aricce]

Здравствуйте, спасибо за развернутый ответ, буду изучать)