ограничить стоимость импорта шрифтов из сторонних библиотек? - PullRequest
Новая
       10

ограничить стоимость импорта шрифтов из сторонних библиотек?

0 голосов
/ 28 апреля 2018

Мой главный вопрос: если я импортирую тип из сторонней библиотеки один раз в свой проект, а затем импортирую / экспортирую его несколько раз внутри страны, я все равно несу расходы, которые я бы импортировал каждый раз непосредственно из Сторонняя библиотека?

Справочная информация:

Недавно я начал использовать отличное расширение vscode, которое называется import-cost , которое показывает размер импортируемых вами пакетов. E.g.:

import { cloneDeep } from 'lodash'; 70.7K
import cloneDeep from 'loadash/cloneDeep'; 14.9K // way better!!

Это позволило мне лучше понять, как все, что я импортирую, в конечном итоге повлияет на мой окончательный размер пакета. Одна конкретная проблема, которую я заметил, - это импорт типов TypeScript из сторонних библиотек. Чтобы импортировать только один тип, вам все равно нужно импортировать весь пакет. E.g.:

import { IComponentOptions } from 'angular'; 168.3K // Not cool!!!

Если это не может быть улучшено каким-либо образом, я просто не уверен, что оно того стоит.

Итак, мой вопрос: вместо того, чтобы импортировать этот тип каждый раз, когда я пишу компонент, прямо из angular, если я делаю что-то вроде следующего, это дешевле, чем импортировать его каждый раз напрямую из углового? Пример:

путь / к / мой / проекта / типы / shims.d.ts 

export { IComponentOptions } from 'angular';

путь / к / мой / проект / компоненты / MyComponent / myComponent.cmpt.ts 

import { IComponentOptions } from "../../types/shims";
import controller from './myComponent.ctrl';
import template from './myComponent.tpl.html';

const myComponent: IComponentOptions = {
  template,
  controller,
  bindings: {
    someBinding: '@'
  }
};

export default myComponent;

Если интерфейс IComponentOptions импортируется из файла shims несколько раз, как это происходит в моем проекте, я все равно несу затраты на импорт каждый раз, или же концепция совместного использования файлов внутри компании меньше дорого?

Общий вопрос имеет большее значение, чем просто набор текста, но это особый вариант использования, который спровоцировал это в настоящий момент.

Если кто-нибудь может ответить на это, я был бы очень признателен! Спасибо

РЕДАКТИРОВАНИЕ ПОСЛЕ ОТВЕТА:

Как указано в принятом ответе, на самом деле это похоже на ошибку с расширением import-cost, так как импорт только типов из библиотек не должен приводить к импорту кода модуля. Я открыл проблему здесь , чтобы, надеюсь, решить эту проблему.

Поскольку этот вопрос имеет дальнейшие последствия, другой ответ также очень полезен, и важно отметить, что хотя import-cost покажет стоимость каждого импорта, если вы импортируете что-то несколько раз, это не так. дороже, чем импортировать что-то один раз.

Ответы [ 2 ]

0 голосов
/ 28 апреля 2018

На ваш главный вопрос нет. При импорте вы импортируете из модуля. Каждый модуль импортируется только один раз и определяется файлом, в котором он находится. Не имеет значения, сколько раз вы импортируете что-либо или в скольких файлах. Он либо загружается один раз вашей модульной системой, либо упаковывается один раз вашим инструментом связывания.

Неважно, будете ли вы импортировать / реэкспортировать типы. В конце концов, вы должны объединить пакет JavaScript, в который включен тип. В случае lodash пакет lodash npm поставляется в различных форматах: пакеты со всем кодом для нескольких модульных систем и автономные файлы JavaScript для функций. Таким образом, вы можете загружать только нужные вам функции вместо всей библиотеки.

Я не уверен насчет AngularJS, но если он похож на Angular (версии 2+), то вся библиотека находится в одном файле JavaScript, поэтому при импорте чего-либо из нее вы скачаете весь файл или в комплекте. Но, как уже говорилось, только один раз.

Чтобы минимизировать полезную нагрузку JS на вашей странице, используйте упаковщик с возможностями встряхивания дерева. Потрясение деревьев может проверить то, что вы используете из библиотеки, и включить только тот код, который вам нужен, отбрасывая все остальное.

0 голосов
/ 28 апреля 2018

На самом деле я думаю, что плагин не так. Вы можете проверить полученный код JavaScript, но импорт, который импортирует только типы из модуля, будет исключен, так как типы не используются в выражениях. См. FAQ

...