javascript - Comment trouver du code mort dans un grand projet React ?

Afin de refondre un projet côté client, je cherche un moyen sûr de trouver (et de supprimer) le code inutilisé.

Quels outils utilisez-vous pour trouver du code inutilisé/mort dans de grands projets React ? Notre produit est en développement depuis plusieurs années, et il devient très difficile de détecter manuellement le code qui n'est plus utilisé. Nous essayons cependant de supprimer autant de code inutilisé que possible.

Les suggestions pour des stratégies/techniques générales (autres que des outils spécifiques) sont également appréciées.

Merci

Réponse #1

Modifier

unimported est désormais obsolète puisqu'il n'est plus maintenu. knip est suggéré comme alternative.

Solution :

Pour les projets Node, exécutez la commande suivante à la racine de votre projet :

npx unimported

Si vous utilisez des annotations de type Flow, vous devez ajouter le paramètre --flow :

npx unimported --flow

Source & documents : https://github.com/smeijer/unimported

Résultat :

Arrière-plan

Tout comme les autres réponses, j'ai essayé beaucoup de bibliothèques différentes mais je n'ai jamais eu de vrai succès.

J'avais besoin de trouver des fichiers entiers qui ne sont pas utilisés. Pas seulement des fonctions ou des variables. Pour cela, j'ai déjà mon linter.

J'ai essayé deadfile, unrequired, trucker, mais sans succès.

Après avoir cherché pendant plus d'un an, il ne restait plus qu'une chose à faire. Écrire quelque chose moi-même.

unimported commence à votre point d'entrée et suit toutes vos instructions import/require. Tous les fichiers de code qui existent dans votre dossier source et qui ne sont pas importés sont signalés.

Notez qu'à ce moment, il ne scanne que les fichiers source. Pas les images ou autres ressources. Comme celles-ci sont souvent « importées » d'autres manières (via des balises ou par CSS).

De plus, il y aura des faux positifs. Par exemple, parfois nous écrivons des scripts destinés à simplifier notre processus de développement, comme les étapes de construction. Ceux-ci ne sont pas directement importés.

De plus, parfois nous installons des dépendances entre pairs et notre code n'importe pas directement celles-ci. Celles-ci seront signalées.

Mais pour moi, unimported est déjà très utile. J'ai supprimé une douzaine de fichiers de mes projets. Donc ça vaut vraiment la peine d'essayer.

Si vous avez des problèmes avec cela, veuillez me le faire savoir. Par les problèmes GitHub, ou contactez-moi sur Twitter : https://twitter.com/meijer_s

Réponse #2

Les bibliothèques telles que unrequired et deadcode ne prennent en charge que le code hérité. Pour trouver les éléments inutilisés à supprimer manuellement, vous pouvez utiliser deadfile.

bibliothèque : https://m-izadmehr.github.io/deadfile/

Prise en charge prête à l'emploi pour ES5, ES6, React, Vue, ESM, CommonJs.
Il prend en charge l'importation/require et même l'importation dynamique.

Il peut simplement trouver des fichiers inutilisés, dans n'importe quel projet JS.

Sans aucune configuration, il prend en charge les fichiers ES6, React, JSX et Vue :

Réponse #3

Solution pour Webpack : UnusedWebpackPlugin

Je travaille sur un gros projet front-end React (plus de 1100 fichiers js) et je suis tombé sur le même problème : comment savoir quels fichiers ne sont plus utilisés ?

J'ai testé les outils suivants jusqu'à présent :

lié
dossier mort
non requis

Aucun d'entre eux n'a vraiment fonctionné. Une des raisons est que nous utilisons des imports « non standard ». En plus des chemins relatifs habituels dans nos import, nous utilisons également des chemins résolus par la fonctionnalité de résolution de webpack, ce qui nous permet essentiellement d'utiliser un import 'pages/something' pratique plutôt que le import '../../../pages/something' encombrant.

PluginWebpackInutilisé

Voici donc la solution que j'ai finalement trouvée grâce à Liam O'Boyle (elyobo) @GitHub : https://github.com/MatthieuLemoine/unused-webpack-plugin

C'est un plugin webpack donc ça va fonctionner seulement si votre empaqueteur est webpack.

Je trouve personnellement bien que vous n'ayez pas besoin de l'exécuter séparément, mais qu'il soit intégré à votre processus de construction en lançant des avertissements lorsque quelque chose ne va pas.

Notre sujet de recherche : https://github.com/spencermountain/unrequired/issues/6

Réponse #4

Tout d'abord, très bonne question, dans les grands projets, les programmeurs essaient généralement de nombreuses lignes de code pour tester et à la fin du résultat, il est difficile de trouver le code inutilisé.

Il y a deux possibilités qui doivent fonctionner pour vous - je le fais généralement chaque fois que j'ai besoin de supprimer et de réduire le code inutilisé dans mon projet.

1re façon WebStorm IDE :

Si vous utilisez l'IDE WebStorm pour le développement JS ou React JS/React Native ou Vue JS, etc., il nous le dit et indique beaucoup de mentions avec différentes couleurs ou un avertissement rouge comme code inutilisé à l'intérieur de l'éditeur

mais cela ne fonctionne pas dans votre scénario particulier, il y a une autre façon de supprimer le code inutilisé.

~~2e méthode bibliothèque non requise :~~ (JSX n'est pas pris en charge)

La deuxième façon de supprimer le code inutilisé à l'intérieur du projet est la bibliothèque non requise, vous pouvez la visiter ici : unrequired github

une autre bibliothèque appelée depcheck sous NPM et GitHub ici

Suivez simplement leur méthode appropriée - comment les utiliser, vous résoudrez facilement ce problème non utilisé

Espérons que cela vous aide