Первоначально это было опубликовано в моем блоге: https://camchenry.com/blog/deleting-dead-code-intypescript .
Что такое мертвый код?
«Мертвый код» – это код, который никогда не используется. На него не ссылается какой -либо другой код, он не импортируется, он никоим образом не используется.
Рефакторирование проекта по созданию определенных типов, методов или свойств устаревшими без удаления этого устаревшего кода создаст мертвый код. Изменение направления проекта, например, выбор использования другой API или библиотеки, также может создать мертвый код. На крупных проектах со многими разными командами и изменяющимися приоритетами, Появление мертвого кода неизбежно Анкет
Почему вы должны удалять мертвый код?
Есть много причин, почему вы должны удалить мертвый код. Есть много эффектов, которые мертвый код может оказать на большой проект:
- Мертвый код должен быть составлен, что замедляет время компиляции. Он также может быть включен в окончательный результат, увеличивая общий размер исполняемого файла.
- Мертвый код должен быть загружен, который увеличивает размер проекта.
- Мертвый код может ссылаться на другой мертвый код и сделать его важным.
- Мертвый код должен быть понят, что делает проект труднее поддерживать и работать.
Когда вы удаляете мертвый код, вы:
- Облегчить понимание и поддерживать проект.
- Ускорить время компиляции.
- Уменьшить размер проекта.
В результате удаления мертвого кода программа будет более быстрее для загрузки и компиляции, а ее исполняемый файл вывода будет меньше и быстрее.
Как найти мертвый код
Во -первых, вам нужно будет использовать TypeScript в своих проектах для работы этих инструментов. TypeScript упрощает трудную задачу определения того, используется ли какой -либо заданный кусок кода или нет.
Во -вторых, вы захотите установить ts-prune и TS-Unure-Exports Во всем мире, поэтому их можно использовать для любого проекта. Запустите эти команды в терминале:
npm install -g ts-prune ts-unused-exports
По моему опыту, ни один инструмент не даст идеальных результатов для выявления мертвого кода. Итак, я рекомендую чередовать оба этих инструмента, чтобы найти мертвый код.
Как использовать TS-Prune
Запустить ts-prune Запустите следующую команду в терминале:
ts-prune --project tsconfig.json
Вы должны увидеть некоторые результаты, подобные этим:
\src\components\Avatar\index.ts:18 - STYLE_CLASSES \src\components\BulkActions\index.ts:26 - BulkAction \src\components\CheckableButton\index.ts:13 - CheckableButtonProps \src\components\Choice\index.ts:9 - ChoiceProps \src\components\Combobox\index.ts:2 - ComboboxTextField \src\components\DataTable\utilities.ts:34 - isEdgeVisible (used in module) \src\components\DropZone\index.ts:38 - DropZoneFileType \src\components\IndexTable\index.ts:6 - CellProps \src\components\IndexTable\index.ts:11 - Cell
Левая сторона-это номер файла и строки, где происходит потенциальный мертвый код. Правая сторона-это название экспорта, который кажется неиспользованным. Если экспорт используется только внутри, у него будет текст (используется в модуле) добавил к этому. Если экспорт по умолчанию не используется, правая сторона скажет по умолчанию Анкет
Я в порядке с неиспользованным экспортом, пока экспорт используется внутри, поэтому я рекомендую отфильтировать линии с (используется в модуле) в них. Вы можете сделать это, подключив выход в Греп :
ts-prune --project tsconfig.json | grep -v '(used in module)'
Как использовать TS-нельзя использовать экспорт
Запустить TS-Unure-Exports Запустите эти команды в терминале:
ts-unused-exports tsconfig.json
который должен создать некоторые результаты, как это:
src\utilities\features\index.ts: Features, useFeatures src\utilities\focus-manager\index.ts: FocusManagerContextType src\utilities\frame\index.ts: FrameContextType src\utilities\index-table\index.ts: useRowHovered src\utilities\listbox\index.ts: ListboxContextType src\utilities\media-query\index.ts: MediaQueryContextType src\utilities\portals\index.ts: PortalsManager src\utilities\resource-list\index.ts: ResourceListContextType src\utilities\theme\index.ts: ProcessedThemeConfig src\utilities\theme\types.ts: ThemeLogo, Role, AppThemeConfig src\utilities\theme\utils.ts: buildCustomPropertiesNoMemo
Левая сторона перечисляет файл, который содержит неиспользованный экспорт. Правая сторона перечисляет имена неиспользованных экспорта в файле. Если экспорт модуля по умолчанию не используется, правая сторона будет включать по умолчанию Анкет
Я часто буду игнорировать неиспользованные типы, так как это обычно не очень проблема. Во многих случаях это свидетельствует о работе, которая в процессе. Он также не включен в скомпилированный JavaScript (поскольку в JavaScript не существует типов), поэтому оставление его в проекте не повлияет на размер сборки. Для этого добавьте -AllowUnusTypes флаг команде:
ts-unused-exports tsconfig.json --allowUnusedTypes
Как удалить мертвый код
К сожалению, вам придется вручную пройти через каждый результат и определить, оставлять ли его или удалить его. Часто есть умеренная ложная положительная скорость, когда дело доходит до поиска мертвого кода. Не весь неиспользованный код является мертвым кодом, но весь мертвый код является неиспользованным кодом .
Если какие -либо шаблоны появляются при определении мертвого кода, я рекомендую автоматизировать процесс. Создайте сценарии, чтобы объединить результаты этих инструментов. Отфильтруйте его, чтобы удалить любые ложные позитивы. Затем автоматически генерируйте различия для удаления мертвого кода. Для небольших проектов это, вероятно, излишняя (и это нормально). Для крупных проектов это Воспользователь силы Это сделает всех в вашей команде более продуктивными.
При удалении мертвого кода есть пара исключений, которые я всегда помню:
- Экспортируемые компоненты типы прочтков в порядке. Они могут не быть «использованы», но они, вероятно, будут использоваться потребителями модуля для создания производных типов.
// OK:
export type ComponentProps = {
/* ... */
};
- Экспортированные значения по умолчанию в порядке. Они позволяют потребителям модуля получить доступ к неявным значениям по умолчанию объектов и функций, которые в противном случае недоступны программно.
// OK:
export const defaultFadeTime = 100;
export function animate(fadeTime = defaultFadeTime) {
/* ... */
}
- Недавно добавленный код (менее месяца), вероятно, в порядке. Иногда в прогнозированной работе будет казаться неиспользованной, потому что она неполна.
// Probably OK:
const UserTable = () => {
/* TODO: Going to implement this next week */
};
// NOT OK:
const UserTable = () => {
/* TODO: Going to implement this next week ... 2015-06-01 (6 years ago) */
};
- Метаданные и конкретный код могут быть в порядке. Если есть части кода, которые служат специальной цели (например, предварительно обработаны другим инструментом, ожидаемым рамками и т. Д.) тогда это не может быть неиспользованным или мертвым кодом. Например, фреймворки на стороне сервера могут экспортировать функции, которые не используются в выводе клиента, но вместо этого отображаются на сервере.
// OK: special function used by the Next.js framework
export async function getServerSideProps({ req, res }) {
/* ... */
}
Вывод
Удаление мертвого кода – это достойное усилие, которое может сделать работу в проекте быстрее и проще. Используя ts-prune а также TS-Unure-Export Инструменты, мы можем упростить процесс идентификации мертвого кода.
Если вы младший разработчик Автоматизация процесса поиска мертвого кода и удаления его-отличная задача по старшим уровням, чтобы научиться делать. Каждый в вашей команде будет признателен за то, чтобы иметь меньше кода для загрузки, компиляции и понимания. И это поможет вам лучше понять вашу кодовую базу. Вы, вероятно, изучите много других полезных навыков на этом пути.
Удачи и счастливой охоты!
Оригинал: “https://dev.to/camchenry/how-to-delete-dead-code-in-typescript-projects-1i89”