前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >有人真的会去分析代码吗

有人真的会去分析代码吗

作者头像
wade
发布2023-09-01 09:13:22
1900
发布2023-09-01 09:13:22
举报
文章被收录于专栏:coding个人笔记coding个人笔记

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

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

使用:

代码语言:javascript
复制
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.

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

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

代码语言:javascript
复制
$ 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 这个文件,标签最开始的一部分完全重复了,当然,还有其他一些重复的,总共九个。虽然知道了结果,有些还真不知道怎么改,比如这个标签的,难道单独抽出来做个组件?其他的,确实有一些是可以抽离的。

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

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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2023-08-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档