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

最新推荐文章于 2024-10-31 15:49:24 发布

wade3po

最新推荐文章于 2024-10-31 15:49:24 发布

阅读量703

点赞数 10

文章标签：前端性能优化

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

版权

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

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

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

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

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

结果：
在这里插入图片描述