打开 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 响应头

@Ayanokouji 现在肯定不如以前，我也没打算做出来赚多少，做点小买卖喝口汤就行

@zhanlanhuizhang @wuzhewuyou 都要搜哪些关键字？

@seers @GeruzoniAnsasu 感谢推荐

1 格

如果只是解决自己的问题那没啥，如果你想开源推广那别弄了，现在造框架卷 build 工具都难出头。
当然自己写还是有意义的，能熟悉打包 CI CD 流程，能定制特定业务的组件，熟悉框架和 DOM 执行过程和深入了解 Element 特性

为啥现在响应式还要写两套代码？用 tailwindcss 一套代码不就好了嘛，当然有些动画或者特殊效果需要根据设备写不同的组件

@b0x 现在 vite 中的 esbuild 直接可以解析 jsx 文件，不用 swc 也已经很快了

编译慢是 import 写法不对，当你 import 一个文件的时候，构建工具会解析这个文件以及这个文件中所有引用的文件，然后做 tree shaking ，这是造成编译慢点主要原因之一
如果你用过 lodash 项目的话，一般都推荐你用 import debounce from 'lodash/debounce' 写法，而不推荐 import { debounce } from 'loadsh'

直接用 vite 就好

直接用 tailwindcss 就好，公司项目永远都会和 tailwindcss 的默认定义有区别，可以和 UI 商量然后自己自定义样式配置，或者直接用 p-[100px] 这样的自定义值（个人会直接用这种方式，公司项目要的是出活快）。
我不在乎 css 样式文件大小或者其他什么优势，主要就是写起来快，顾名思义，不用切换文件，不用思考类名

可以拿 antd 的来用，移除其中的样式，用 tailwindcss 来自定义样式。我没试过这么做，楼主可以试试，antd@5 目前的样式用的是 css-in-js 方案。

多年前端表示完全不痛苦，现在工具链太全了

可以结合 #3 和 #9 的想法，写一套响应式 web ，然后用 electron 和 flutter 套壳

老实说，我觉得现在还在造组件库没啥市场...