Vite plugin to detect unused files. JS, TS, React, Vue projects are supported.
npm install vite-plugin-deadcodesA vite plugin to detect unused files, which is similar to webpack-deadcode-plugin.
The detected result be like:
Javascript, typescript, react, vue projects are supported:
- ✅ javascript (.js)
- ✅ typescript (.ts)
- ✅ react jsx (.jsx|.tsx)
- ✅ vue SFC or jsx|tsx files (.vue|.jsx|.tsx)
- ✅ stylesheet (.css|.less|.scss|...)
- ✅ assets (.svg|.img|.png|.mp4|...)
- ✅ ...
- ❌ Typescript files which are composed of types only (see below)
- ❌ Stylesheet files which are imported by @import statements (see below)
``bashnpm
npm install vite-plugin-deadcodes --save-dev
Usage
$3
`js
// vite.config.js
import { defineConfig } from 'vite';
import vitePluginDeadcodes from 'vite-plugin-deadcodes';export default defineConfig({
plugins: [
vitePluginDeadcodes(),
]
});
`Or use with options:
`js
// vite.config.js
import { defineConfig } from 'vite';
import vitePluginDeadcodes from 'vite-plugin-deadcodes';export default defineConfig({
plugins: [
vitePluginDeadcodes({
src: '/path/to/src',
emit: '/path/to/result/deadcodes.json',
excludes: ['/.d.ts', '/.(stories|spec).(js|jsx)'],
}),
]
});
`$3
This plugin will only run in build mode.
`bash
npx vite build
`Options
`ts
interface Options {
src?: string;
emit?: boolean | string;
excludes?: string[];
console?: boolean;
}
`$3
The source dir you want to detect.
$3
The path of the result file.
`js
vitePluginDeadcodes({
emit: '/path/to/result/deadcodes.json'
})
`$3
The files that should be ignored.
`js
vitePluginDeadcodes({
excludes: ['/.d.ts', '/.(stories|spec).(js|jsx)'],
})
`
$3
Set
true to show result in the console.Addition
$3
Typescript files that were composed of types only, these files will be removed by typescript parser. Example:
`ts
export type Foo = 'a' | 'b';export interface Bar {
name: string;
}
`If this file contains some exports that are not type, then it can be detected. Like:
`ts
export type Foo = 'a' | 'b';export interface Bar {
name: string;
}
// This function will not be removed by ts parser
export const add = (a: number, b: number): number => a + b;
`$3
In the example below, styles/bar.less can not be detected, which is imported by @import statement.
Planing to fix it in the next version.
`less
// foo.less
@import '../styles/bar.less'.name {
color: blue;
}
``js
// demo.js
import './foo.less'
``