react-unused-image-finder
v2.0.2
Published
A tool to find unused images in a react.js project
Downloads
14
Maintainers
Readme
Image Management Script Documentation
This documentation provides an overview of the Node.js script used to manage image files within a React project. The script identifies unused image files across the project by checking image imports in JavaScript, JSX, TypeScript and TSX
Usage
Installation
Install the package globally using npm:
$ npm i -g react-unused-image-finder
or
$ yarn global add react-unused-image-finder
To ensure the package runs, run it at your project level
Commands available:
$ find-unused-images // This gives a summary of unused images and their relative path
$ find-unused-images-full // This gives a full report of images found, where they are used and unused images relative paths
$ find-unused-images-help // This shows help message
File Structure Read Available
Option 1:
┌── your-react-project
├──├── assets/**/*
├──├── src/**/*
└── **
Option 2:
┌── your-react-project
├──├── images/**/*
├──├── src/**/*
└── **
Option 3:
┌── your-react-project
├──├── src/**/*
├──├──├── images/**/*
└── **
Option 4:
┌── your-react-project
├──├── src/**/*
├──├──├── assets/**/*
└── **
Image Imports Method
// This is the regex used to find imports
const importRegex = /import\s+\w+\s+from\s+['"](\.\.\/[^'"]+\.(?:png|jpe?g|gif|svg))['"]/g;
// How it should read in your file
import some_image from 'file/path/to/image.{png,jpg,jpeg,gif,svg}';
In Developement Method
require('file/path/to/image.{png,jpg,jpeg,gif,svg}');
Script Overview
The script consists of several key functions:
- collectUsedImages: Scans JavaScript and JSX files for imported image files, collecting paths to these images.
- collect_images_src_images and related functions: These functions collect paths to all image files stored in various project directories.
- findUnusedImages: Compares collected image paths to identify unused images and logs results.
Dependencies
- glob: Used to pattern-match file paths, allowing the script to find specific file types across directories.
- fs-extra: An extension of the Node.js native
fs
module, providing additional methods to interact with the file system. - path: A core Node.js module used for handling and transforming file paths.
Functions
collectUsedImages
Searches through all .js
, .jsx
, .ts
and .tsx
files within the src
directory to find image imports. It uses regular expressions to identify import statements and collects the relative paths of these images. Paths are adjusted to be relative to the project's src
directory.
Directory-Specific Collection Functions
- collect_images_src_images
- collect_images_src_assets
- collect_images_root_assets
- collect_images_root_images
Each of these functions targets a specific directory (src/images
, src/assets
, etc.) and collects all image files of types png
, jpg
, jpeg
, gif
, and svg
. The paths are normalized and made relative to the project root.
findUnusedImages
Combines the sets of images collected from different directories and compares them to the set of used images. It identifies any images not referenced in any .js
, .jsx
, .ts
and .tsx
files and logs these as unused, providing a summary of the total images and the unused images.
Potential Enhancements
- Gloabal Function: Consolidate the
collect_images_**
functions to a single function - Move images: Move unused images to a folder for easy removal
- Add Terminal Interaction: If unused images are found allow the deletion of them through terminal prompts
- Error Handling: Add robust error handling to manage file access permissions and missing directories.
- Test: Write test for the scripts
This script is a useful tool for maintaining efficient management of assets in large projects, helping to reduce clutter and optimize application performance.