npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-unused-image-finder

v2.0.2

Published

A tool to find unused images in a react.js project

Downloads

14

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:

  1. collectUsedImages: Scans JavaScript and JSX files for imported image files, collecting paths to these images.
  2. collect_images_src_images and related functions: These functions collect paths to all image files stored in various project directories.
  3. 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.