很早之前使用 webpack 的时候，也有类似的插件，分析打包出来之后的代码，分别是哪些模块比较庞大，针对打包的内容进行优化。说实话，知道归知道，但是没有哪个项目使用分析过。最近刚好看见了两个插件，于是对自己目前在开发的项目跑了一下。

项目是 vite，用的是 rollup-plugin-visualizer 这个插件，分析结果是可视化的。

使用：

npm install --save-dev rollup-plugin-visualizerimport { visualizer } from "rollup-plugin-visualizer";
import { defineConfig, type PluginOption } from 'vite'//vite.config.js
export default defineConfig({plugins: [visualizer({filename: "stats.html",}) as PluginOption],
})

可以自己进行一些配置，没太大必要，能看见结果就行。项目分析结果：

鼠标放上去，还能看见一些详细信息。不分析不知道，其中一个也没这么大，也是怪自己，当时为了扫码，用了好几个插件，代码没删除，所以这么大。去代码之后这个文件就正常了。而 lodash，最开始的时候没去查一下，lodash 提供了 esmodule 版本，可以按需引入，因为使用的也没有点多，改不改还在思考中（大概率是不改了，怕麻烦）。

挺好用的，如果每个项目都大概分析一些，一些比较大的文件，进行优化，应该对越来越大的项目有挺大的帮助，只是，有人真的会去这样分析项目吗。

上面的插件是分析打包出来的结果，有一个插件 jscpd，是分析代码重复，支持超过 150 中代码语言，GitHub 的第一句话，我觉得真的有点味道：
Copy/paste is a common technical debt on a lot of projects.

复制粘贴确实是大部分项目的技术债，能跑就行。

没有做太多配置的探索，就是简单使用：

$ npm install -g jscpd//根目录新建.jscpd.json
{"threshold": 1,//阈值，超过这个值的就输出报错"reporters": ["html","console"],"absolute": true
}//命令行执行
jscpd ./src -o result

-o是–output的简写，表示输出文件到什么文件夹，结果可以打开输出的index.html

阈值 5：

阈值 1：

这个阈值，好像用处不大，看起来只是单纯的是否报错，如果有些项目做超过多大的阈值报错就警告不通过之类的有用。

结果：

分析结果就是 SelectTripType.vue 这个文件和 SelectType.vue 这个文件，标签最开始的一部分完全重复了，当然，还有其他一些重复的，总共九个。虽然知道了结果，有些还真不知道怎么改，比如这个标签的，难道单独抽出来做个组件？其他的，确实有一些是可以抽离的。

所以，真的有人会去分析代码吗，还是，所做的项目，所在的团队，所在的公司，真的有在做这件事？

之前看见一句话，有点意思：
鄙视屎山代码，理解屎山代码，写出屎山代码。

欢迎关注订阅号 coding 个人笔记