前端项目渲染超级超级超级慢 VUE，大佬帮忙看下问题

[still97]

如图： https://raw.githubusercontent.com/bowuL/myPic/main/%E6%80%A7%E8%83%BD.png,贴上图了，谢谢大家，帮忙看一下，基本属于前端小白

[karott7]

打开 network 面板，点击 all 查看所有资源加载情况，有一个 514kb 的 js 文件，一个 3.7M 的 css 文件，一个 2.6M 的 js 文件，这三个文件平均要 2.5s ，还有一个 449kb 的 css 文件
盲猜用了饿了么组件库，没有按需加载，还有一些 js 库应该引入方式有问题导致全部加在，比如你只用了几个 lodash 方法，但是打包了所有 lodash 方法，引入 lodash 相关方法最好用 import debounce from 'lodash/debounce'

先从按需引入开始吧，这个做好了至少解决了一半的问题，然后图片换成 webp 格式，所有 js/css/woff2/图片等资源文件增加响应头 Cache-Control: public, max-age=31536000 ，html 文件增加 Cache-Control: no-cache 响应头

[lsk569937453]

100%是前端代码有 bug ，找个前端大佬可能几分钟就能定位到了。。。
上次我把 styled-components 的 css 定义写在 react hooks 里面，导致界面一直重绘，卡的一 P 。我自己看了半天也不知道什么错误。找了个前端大佬，看源代码调试一把，10 分钟不到就定位到问题了。

[guozhigq]

看了一下首页
在开发者工具界面可以用 ⬆️+command+P 命令调出面板，输入 Coverage 查看页面初始化渲染时的 js 、css 代码覆盖率，做分包或者延迟加载。
页面中有耗时比较久的长任务，可以分开多个。
主要思路跟楼上的几位也没什么区别🤣

[still97]

@lsk569937453
https://imgur.com/a/L2TOMpD
兄弟，是这样的，可是我不知道怎么调

[still97]

@guozhigq 还有，你是怎么可以贴图的，vip?

[liangtao927190]

op ，不如像楼上说的一半一半注释掉代码来看看到底是哪个组件造成问题。

你就先把首页的组件都注释掉，一个一个打开，看看到底是哪里慢

[kdwnil]

其实渲染没什么问题，时间基本就浪费在加载那些超大的 css 和 js 上面，op 去看看 element-ui 的文档，搞一下按需加载应该就能解决问题了。其他方面的微优化就参考 #21

[M003]

你用的框架,不要打包进去. 去查一下如何 cdn 加载资源.

https://p.ipic.vip/1sh9yu.png

这样大的框架就用网络资源,而不是打包到自己代码里.

[grit136907108]

没有搞按需加载导致的吧，建议分析下依赖看看

[morgan1freeman]

@still97 #11 这个是 chatgpt 生成的，bro

[luvxy]

1 gzip 压缩 ,让请求快点

[luvxy]

1 gzip 压缩 ,让请求快点

[sL83OdzP0RtI2l31]

@xudaxian520bsz 怎么连面试的八股文都来了

[huangqihong]

二分注释法，首先注释大部分代码，只保留简单的页面，看是不是代码的原因

[caosen]

你 app.js 单文件这么大，可以在 build 的时候按需加载

[still97]

@kdwnil 谢谢 bro ，我找下入口，或者 bro 可以帮我看一下吗，应该不可以吧

[still97]

``` javascript
postcss: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
```
找到这个东西了，在 vue.config 里边，注释掉就很快了，这玩意有 v 友用过吗