HelloGitHub-Team / geese

采用 Next.js 构建的开源爱好者社区。An open-source enthusiast community built with Next.js.
https://hellogithub.com
Apache License 2.0
282 stars 66 forks source link

[优化]减小项目打包的体积 #101

Open 521xueweihan opened 1 year ago

521xueweihan commented 1 year ago

Image

cqh963852 commented 1 year ago

"@next/bundle-analyzer": "^12.3.1",

这一行移动到 devDependencies 中。属于开发依赖。(和本主题无关)

KonghaYao commented 10 months ago

看了一下代码,发现飘红的路径,好像用到了 MDRender,可能是这个地方有点占空间

aolyang commented 4 months ago

瞅了一眼 contribution guide (实际藏在docs/content.md 一开始没找到,我在写这个评论时刻意找了以下才发现)

开发须知在这里

这个实在是眼拙没看到,建议写个大大的 CONTRIBUTION 参考github推荐: https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/setting-guidelines-for-repository-contributors

所以,我就仅dev后直接改代码试了下build,效果如下(改了user, repository)。

image

内容很简单,就是按照数据加载逻辑,把某些渲染开销大的组件直接丢到React.lazy

优化前 优化后
1716258911489 1716258894502

目前来说有两个大的需要考虑:

  1. 页面的结构更详细的通过Layout 和 Leaf Component区分
  2. 根据Layout直接加载,Leaf可以任意异步 加载的逻辑,将大部分Leaf调整为异步加载,data fetch可以按Leaf组件重新设计接口,避免在根路由一股脑请求完所有数据