Nano Hash - криптовалюты, майнинг, программирование

Как в angular-cli работает атрибут lazy для загрузки глобальных библиотек?

Добавляя их в свойство scripts файла .angular-cli, можно загружать глобальные скрипты в ваше приложение. Этот пример взят из документации:

"scripts": [
  "global-script.js",
  { "input": "lazy-script.js", "lazy": true },
  { "input": "pre-rename-script.js", "output": "renamed-script" },
]

Однако меня немного смущает атрибут «ленивый». При сборке приложения скрипт, загружаемый для ленивой загрузки, больше не упаковывается в файл scripts.bundle.js.

Но как же тогда будет загружаться библиотека? Что мне нужно сделать, чтобы загрузить файл, когда это необходимо?

angular angular-cli
26.05.2017

Ответы:


1

Если вы настроите атрибут «ленивый» в .angular-cli.json для загрузки глобальных библиотек, вам потребуется «ленивая загрузка» сценария, когда это необходимо. Вот шаги для настройки.

1.Настройте .angular-cli.json в массиве apps[0].scripts.

"scripts": [
    { "input": "../node_modules/jquery/dist/jquery.js", "output": "jquery", "lazy": true }
],

Вы получите файл jquery.bundle.js в выходных данных сборки.

2. Загрузите сгенерированный скрипт, лениво добавив тег <script> в DOM (<head>).

const script = document.createElement('script');
script.src = 'jquery.bundle.js';
script.type = 'text/javascript';
script.async = true;
script.charset = 'utf-8';
document.getElementsByTagName('head')[0].appendChild(script);
03.06.2017
  • Это очень полезно: таким образом мы можем лениво загружать глобальные библиотеки, которые используются только в лениво загруженном модуле. 04.06.2017
  • Я не уверен, что это будет работать с хешированием вывода, когда angular-cli генерирует ваш jquery.bundle.js как jquery.8ff49f9cee63643bea4a.bundle.js. 12.07.2018
  • Спасибо за ответ, это сработало отлично. @mfink, когда мы указываем вывод как «jquery», сгенерированный файл всегда будет «jquery.bundle.js». 11.12.2018
  • Быстрое обновление этого ответа, в более новых версиях Angular нет вывода .bundle.js, это будет просто yourlibraryname.js 07.02.2019

    • 2

    В качестве альтернативы манипулированию DOM на шаге № 2 принятого ответа Уилла Хуанга теперь также можно использовать функцию динамического импорта esnext с TypeScript, как описано в этот пост.

    Используя этот подход, можно было бы добавить следующее в лениво загруженный NgModule:

    import('jquery')
    .then((module: Function) => {
        window['$'] = module;
    });
    06.12.2017
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..