@Aricce

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

Есть страница 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 файлов в памяти.
  • Вопрос задан
  • 281 просмотр
Решения вопроса 2
@alexmixaylov
Вы можете использовать вебпак, чтобы собрать проект
Он вам может разбить ваш js на модули, библиотеку вынесет в отдельный файл
Вы хоть 100 раз импортруйте в разных js файлах в итоговом коде библиотека будет только в одном екземпляре
Ответ написан
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
В моем понимании импорт одной и той же библиотеки для разных файлов это просто захламление памяти, т.е. как я себе это представляю: есть 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
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы