Nuxtプロジェクト内で使われてないコンポーネントを探す
- プロジェクトが進むと役目を終えた使わないコンポーネントが出てくる
- 放置していくとどれが使っててどれが使ってないかわからなくなってくる
- 使わなくなったコンポーネントの代わりに作られたコンポーネントの名前が似てると最悪みがある
- 「このコンポーネントだろう」と思って変更してみたら「残念!そっちじゃありません!」みたいなやつ
- 使わなくなったタイミングで削除するのがベストだけどそうもいかないのが現実
という感じで、使われなくなったコンポーネントを削除したい。
使われなくなったコンポーネントを見つける
webpackのプラグインでビルド時に使われていないコンポーネントが探せる。
unused-files-webpack-pluginを使って一覧を出す
nuxt.config.js
の build.plugins
に追記する。
const { UnusedFilesWebpackPlugin } = require('unused-files-webpack-plugin') export default { // 省略 build: { plugins: [ new UnusedFilesWebpackPlugin({ patterns: ['src/**/*.vue', 'src/**/*.js'] }) ], } }
patterns
はビルド時に使われてないファイルをフィルターするオプション。
['src/**/*.vue', 'src/**/*.js']
を指定すると、 src/
ディレクトリ内でビルド時に使われてない .vue
と .js
ファイルが一覧で出力されるようになる。
build の実行
nuxt build
を実行すると、次のような出力が得られる。
... Entrypoint app [big] = aaa5230fc2fc8d2d7264.js a4af7f6bc00ce5633bbf.js b2deabd0e786c068c1e3.js 9d7368b9e3e8d6ddd2a4.js WARNING in UnusedFilesWebpackPlugin found some unused files: src/components/lp/AppFooter.vue src/components/lp/ShareButtons.vue src/components/lp/SocialLinks.vue src/components/organisms/AppFooter.vue src/components/organisms/AppPage.vue src/modules/generate_route.js ...
ここに出てきたファイルを ビルド時に使われてない = 不要
とみなして削除。
実際は使ってないけど import
されてるファイルは出てこない
使わなくなったけど、使われているコンポーネントから import
されてる場合、使われてないファイルとしてはでてこない。
たとえば次のような場合
<script> import AppFooter from '~/components/lp/AppFooter' export default { layout: 'lp' } </script>
AppFooter
は使われてないけど import
しているコンポーネントが使われているのでunusedではなくなる。ESLintなりでチェックして潰していきましょう
Nuxtプロジェクトじゃなくても
unused-files-webpack-pluginは名前の通りただのwebpackのプラグインなので、webpackでビルドしてるプロジェクトなら使えます