В TypeScript 2.4 добавлена поддержка динамических import() выражений, которые позволяют асинхронно загружать и выполнять модули ECMAScript по запросу.
Это означает, что мы можем условно и лениво импортировать другие модули и библиотеки.
В этой статье мы увидим, как мы можем использовать эту функцию в Angular, чтобы создать пакет меньшего размера. Возьмем реальный пример из нашего приложения. (Даторама, кстати)
У нас есть страница, полная виджетов, и мы предоставляем нашим клиентам возможность экспортировать их в Excel.
Под капотом мы используем библиотеку под названием xlsx. Было бы бесполезно добавлять библиотеку в наш исходный пакет, потому что каждый клиент должен будет загрузить и проанализировать ее, даже если он, вероятно, не будет ее использовать.
Лучшим решением было бы лениво загружать библиотеку, когда пользователь нажимает кнопку экспорта.
Посмотрим, как мы можем это сделать.
Предполагая, что вы работаете с angular-cli, это все, что вам нужно сделать, в противном случае вам придется добавить поддержку самостоятельно. (разделение кода веб-пакета и т. д.)
Круто то, что мы можем использовать его с RxJS и добавлять в каждый поток. Например:
Последнее, что нам нужно сделать, это просто установить значение module в вашем tsconfig.app.json файле на esnext.
Подпишитесь на меня в Medium или Twitter, чтобы узнать больше об Angular, Vue и JS!
