有人真的会去分析代码吗-CSDN博客

本文链接：https://blog.csdn.net/wade3po/article/details/132231720

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

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

使用：

npm install --save-dev rollup-plugin-visualizer

import { 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：
在这里插入图片描述