分析一下你的项目代码，给项目瘦瘦身

最早之前使用 webpack，有玩过分析打包出来代码的插件，vue 脚手架甚至内置了一个。其实无论什么开发打包工具，都有类似的工具。

最近新起了一个项目，自己对一些结构有自己的坚持（或许说是习惯），于是要求另一个开发最好也做一些全局方面的代码结构和代码使用。气氛不是很融洽，也没有面红耳赤就是了，只是我自己有点爆炸。

• 一个是 vue3 的 ref 和 reactive，这个问题网上讨论的课太多了，我不想过多争论，是否会造成心智负担，我归结于个人的风格习惯。
• lodash 按需引入，我觉得没什么好争议的，问我是出于什么考虑？我差点就绷不住。
• 格式化插件，prettier，有 bug，不好用，能咋说。
• typescript 收益不成正比，这个问题我也不想讨论，想用的就自己用起来，不想用的，规范如此还不用，我也没办法，毕竟我不是大 leader。
• 一些工具类函数，如果数量比较多的同类型函数，按文件新建（因为我的四个 localstorage 当作公共基础，就说如果这样，这几个也要单独提出去），我也不懂这样的建议是否造成什么负担。
• 因为是重构，一些旧代码照搬过来的，我的意思是改成新的语法，结果是，后面慢慢优化。
• 路由跳转，我一直用的是官方说的 useRouter，第一次知道 import router from ‘@/routers’;也能直接用，导致我都不知道该怎么说了，毕竟用 useRouter 你得两行代码。
• 常用的，hardcode 的一些（比如 status，type）之类的提取出来新建一个 enumeData 文件，嗯，也是说后面优化（有一点可以吸取，他这些命名都是大写，可能是比较好）。
• 刚开始做，一些全局性的可以顺便一起做了，然后说是先写出页面，跑通逻辑，那些东西，可以后面再做。要是考虑太多，速度太慢了。确实，被说服了，能跑就行。
• 更难受的是，控制台一堆警告，大部分是关于类型的警告，看着是真难受啊。

不是想抱怨什么，有些是代码风格不一样能理解，一些理念不一样也能理解。最后就是能跑就行，管他呢，大家一起堆。

跑题了，今天想要分享的是代码分析，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],
})

运行打包命令后，会生成 stats.html 文件，打开就有分析的结果：

如果某一块内容太大，就可以具体分析是否能优化。

另一个工具是 jscpd，支持超过 150 种代码语言：
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

结果：

看了一下结果，有一些重复检测的有点不太合适，比如一些标签，居然检测出来是重复的。

个人觉得，如果对这块有一点洁癖或者是执着的，可以用这两个工具给自己的项目瘦瘦身。而我，既然改变不了别人，那就让自己随波逐流，融入这个项目，能跑就行。

鄙视屎山代码，理解屎山代码，写出屎山代码。

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