docs: add tutorial about adding a lazy third party library(TS, import blacklist, etc)

[rodmax]

Create tutorial about lazy lib integration(copy/paste) from working project

[rodmax]

TODO: review and put to docs bellow content

Разговор двух разработчиков Василия(:confused:) и Степана(:sunglasses:)

😕 вот я не пойму, у нас leaflet в @syn/maps типа грузится лениво через динамический import('leaflet') в map-initializer.service.ts

и в то же время в планах и других старых компонентах импортируется напрямую

Получается косяк какой-то

😎 Хм, давай посмотрим, что у нас там в бандлах... да leaflet сидит в vendor, т.е. никакого lazy

image

😎 что интересно, lazy модуль для leaflet-обертки создается(из-за динамического импорта), но в нем пустышка, так как leaflet импортируется напрямую в других местах, и соотв. попадает в vendor-модуль

image

😕 так что, все зря???

😎 Почему, возьми и отрефактори, чтобы в коде не использовали import * as L from 'lealfet' и сделай какой-нибудь сервис lealfet.service.ts, который лениво загрузит leaflet либу, и все будут работать через него

😕 Ага, умный такой, проблем, знаешь, сколько с этим, смотри:

• Куча кода уже юзает L.xxx() напрямую
• есть вообще конструкции class X extends L.Marker, т.е. у меня есть не-lazy классы, которые extends от lazy? а-а-а-а
• ну и наконец, я отрефакторю, а послезавтра кто-то опять впендюрит импорт lealfet-а напрямую

😎 в 2020 это не проблема, вот тебе план для автопилота

• 1️⃣ добавь импорт leaflet-а в блэклист правило tslint, после этого тебе вообще нельзя импортировать leaflet

// tslint.json
"import-blacklist": [true, "leaflet"]

• 2️⃣ сделай файл @common/leaflet/leaflet.typings.ts

import type * as L from 'leaflet'; // tslint:disable-line: import-blacklist
export default L; // tslint:disable-line: no-default-export

И импортируй import L from '@common/lealfet/leaflet.typings.ts только отсюда

Киллер фича здесь import type * as L from 'leaflet' слово type из TS 3.8+ обозначает, что импортировать можно только для типизации
реальный код отсюда брать нельзя, и TS вырежет этот импорт перед тем, как отдать webpack-у

• 3️⃣ все теперь замени импорт L в проекте на этот путь к @common/leaflet/lealfet.typings.ts и ты увидишь, где у тебя использовалась типизация leaflet-а, а где использовался код(extends L.Marker, L.latLng(,,,) и т.п.)

• 4️⃣ все теперь постепенно заменяй глобальное исопльзование КОДА L на leaflet.service.ts typescript не даст ошибиться

Ну вот получили настойщий lazy лефлет

image

Выводы

Бандлы бандлами, но, кмк, в данной работе больше ценен сам алгоритм, как железобетонно сделать third-party либу lazy, а именно

• запрещаем ее импортировать через import-blacklist в tslint
• создаем файл third-party.typings.ts из которой экспортируем либу но с ключевым словом type, что исключит протекание кода, только типы
• ну и далее делаем сервис вокруг динамического импорта import(third-party')

Что в common коде

• появился @common/leaflet/leaflet.service.ts он умеет грузить лефлет, причем теперь map-initializer.service.ts использует этот сервис для @syn/maps т.е. загрузка либы идет через одну точку
• ну а далше см. diff там отрефакторен код плана