有人真的会去分析代码吗

这篇具有很好参考价值的文章主要介绍了有人真的会去分析代码吗。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

很早之前使用 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],
})

可以自己进行一些配置,没太大必要,能看见结果就行。项目分析结果:
有人真的会去分析代码吗,javascript,前端,性能优化

鼠标放上去,还能看见一些详细信息。不分析不知道,其中一个也没这么大,也是怪自己,当时为了扫码,用了好几个插件,代码没删除,所以这么大。去代码之后这个文件就正常了。而 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:
有人真的会去分析代码吗,javascript,前端,性能优化

阈值 1:
有人真的会去分析代码吗,javascript,前端,性能优化

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

结果:
有人真的会去分析代码吗,javascript,前端,性能优化
有人真的会去分析代码吗,javascript,前端,性能优化

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

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

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

欢迎关注订阅号 coding 个人笔记文章来源地址https://www.toymoban.com/news/detail-641215.html

到了这里,关于有人真的会去分析代码吗的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Lighthouse前端性能分析工具

    我们多数性能测试,基本上针对接口的性能测试,很少涉及到前端页面的性能测试。 但影响用户体验的因素除了后端接口数据的返回,还有前端页面的渲染等等。 所以我们除了在开发的过程中注意代码的质量,同时还需要专业的网站测试工具辅助,让我们知道自己的网页还

    2024年02月16日
    浏览(40)
  • 前端性能分析工具——Lighthouse

    1、谷歌插件lighthouse的基本介绍 Lighthouse 是一个网站性能测评工具, 它是 Google Chrome 推出的一个开源自动化工具,能够对 PWA 和网页多方面的效果指标进行评测,并给出最佳实践的建议以帮助开发者改进网站的质量。它的使用方法也非常简单,我们只需要提供一个要测评的网

    2024年02月13日
    浏览(44)
  • 前端性能分析工具-Lighthouse

    对于前端开发人员来说,除了实现页面功能外,那就是页面的性能响应问题也要关注。同样对于测试人员在进行性能测试时,也要关注前端页面的性能指标。测试前端性能市面上可以用到的工具也比较多,比如可以用 HttpWatch 进行页面的抓取与分析,或者也可以使用抓包工具

    2024年02月11日
    浏览(59)
  • 【Lighthouse前端性能分析工具】

    我们多数性能测试,基本上针对接口的性能测试,很少涉及到前端页面的性能测试。 但影响用户体验的因素除了后端接口数据的返回,还有前端页面的渲染等等。 所以我们除了在开发的过程中注意代码的质量,同时还需要专业的网站测试工具辅助,让我们知道自己的网页还

    2024年02月12日
    浏览(43)
  • 【Lighthouse前端性能分析工具】超详细!!!

    我们多数性能测试,基本上针对接口的性能测试,很少涉及到前端页面的性能测试。 但影响用户体验的因素除了后端接口数据的返回,还有前端页面的渲染等等。 所以我们除了在开发的过程中注意代码的质量,同时还需要专业的网站测试工具辅助,让我们知道自己的网页还

    2024年02月09日
    浏览(44)
  • 代码层面探索前端性能

    最近在做性能优化,具体优化手段,网上铺天盖地,这里就不重复了。 性能优化可分为以下几个维度:代码层面、构建层面、网络层面。 本文主要是从代码层面探索前端性能,主要分为以下 4 个小节。 使用 CSS 替代 JS 深度剖析 JS 前端算法 计算机底层 这里主要从动画和 CS

    2024年02月08日
    浏览(38)
  • 【前端】vscode javascript 代码片段失效问题解决

    1. 文件--首选项--用户代码片段-vue.json : 添加    在category.vue 文件空白处输入h ,可以显示用户片段  在script中使用失败  问题原因和解决: 在script使用的代码片段写在 javacript.json 中才能使用 VScode-Vue-用户代码片段无效 - Code World        

    2024年01月25日
    浏览(51)
  • 重生前端之我在javascript敲代码(03-数组)

    一. 数组(重点) 思考:如何保存一个班级的所有学生的姓名? 回答:一种方法利用前面学习过的知识,则每一条信息都需要一个变量去保存,缺点是这样做很麻烦,而且容易出错,又不合理;另一种方法就是利用数组。 概念:数组是存储一系列值的变量集合,可以存储多

    2024年04月11日
    浏览(49)
  • 【前端异常】JavaScript错误处理:分析 Uncaught(in promise) error

    在开发过程中,JavaScript的错误处理是一个老生常谈的话题。当应用程序发生未捕获的异常时,Uncaught(in promise) error是其中最常见的错误类型。这篇文章将从多个方面详细阐述这种错误类型的原因与解决方案。 Promise是一种用于异步编程的原生JavaScript对象。它提供了一种处理异

    2024年02月05日
    浏览(90)
  • 【前端】javascript+html+css 家具销售网站(代码+报告)

    👉博__主👈:米码收割机 👉技__能👈:C++/Python语言 👉公众号👈:测试开发自动化【获取源码+商业合作】 👉荣__誉👈:阿里云博客专家博主、51CTO技术博主 👉专__注👈:专注主流机器人、人工智能等相关领域的开发、测试技术。 整个网页在头部部分,定义了字符编码、

    2024年02月14日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包