{"id":21863111,"url":"https://github.com/shfshanyue/shici","last_synced_at":"2025-04-14T19:43:47.035Z","repository":{"id":35846635,"uuid":"117425194","full_name":"shfshanyue/shici","owner":"shfshanyue","description":"使用 next.js 与 graphql 做一个诗词小站","archived":false,"fork":false,"pushed_at":"2023-01-06T04:43:16.000Z","size":1755,"stargazers_count":81,"open_issues_count":15,"forks_count":14,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T08:04:34.111Z","etag":null,"topics":["apollo-client","graphql","nextjs","ssr","typescript"],"latest_commit_sha":null,"homepage":"https://shici.xiange.tech","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shfshanyue.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-14T11:43:37.000Z","updated_at":"2025-01-15T11:32:05.000Z","dependencies_parsed_at":"2023-01-16T07:45:19.464Z","dependency_job_id":null,"html_url":"https://github.com/shfshanyue/shici","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shfshanyue%2Fshici","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shfshanyue%2Fshici/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shfshanyue%2Fshici/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shfshanyue%2Fshici/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shfshanyue","download_url":"https://codeload.github.com/shfshanyue/shici/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248949646,"owners_count":21188119,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo-client","graphql","nextjs","ssr","typescript"],"created_at":"2024-11-28T03:20:04.107Z","updated_at":"2025-04-14T19:43:47.012Z","avatar_url":"https://github.com/shfshanyue.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 诗词弦歌\n\n出于个人兴趣做的一个网站作为自己技术上的试验田\n\n+ [shfshanyue/apollo-server-starter](https://github.com/shfshanyue/apollo-server-starter): 相配套的后端所抽离出来了脚手架 \n+ [shfshanyue/shici-server](https://github.com/shfshanyue/shici-server): 相配套的后端，即将使用我新做的[脚手架](https://github.com/shfshanyue/apollo-server-starter)重写\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://shici.xiange.tech\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/shfshanyue/shici/master/public/static/screen.jpg\" width=\"600\" alt=\"诗词\" /\u003e\u003cbr\u003e\n    \u003csup\u003ehttps://shici.xiange.tech\u003c/sup\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://graphql.xiange.tech/playground\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/shfshanyue/shici/master/public/static/playground.png\" width=\"600\" alt=\"诗词\" /\u003e\u003cbr\u003e\n    \u003csup\u003ehttps://graphql.xiange.tech\u003c/sup\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e 考虑使用 Prerender 的方式重写项目\n\n## 技术栈\n\n+ [typescript](https://github.com/microsoft/TypeScript)，[graphql-code-generator](https://github.com/dotansimha/graphql-code-generator) -- 强类型语言以及类型自动生成\n+ [react](https://github.com/facebook/react), [next.js](https://github.com/zeit/next.js), [next-routes](https://github.com/fridays/next-routes) -- 服务端渲染\n+ [graphql](https://github.com/graphql/graphql-js), [apollo-client](https://github.com/apollographql/apollo-client), `localstorage` -- API \u0026\u0026 store\n+ `docker`, `docker-compose`, `traefik`, `gitlab-ci` -- 部署\n\n## 目录结构\n\n``` shell\n$ tree -L 2 -I node_modules --dirsfirst -aF\n.\n├── .next/                        # 打包后文件\n├── components/                   # 基本组件\n├── config/\n│   └── index.js                  # 配置文件\n├── lib/                          # 工具包\n│   ├── init-apollo.js            # apollo config\n│   ├── utils.js                  # 工具函数\n│   └── with-apollo-client.js\n├── pages/                        # 页面组件\n│   ├── profile/                  # 个人信息\n│   ├── _app.js                   # 页面入口\n│   ├── _error.js                 # 错误页\n│   └── index.js                  # 首页\n├── .babelrc\n├── .gitignore\n├── .gitlab-ci.yml                # CI 配置\n├── static                        # 静态文件\n├── Dockerfile\n├── README.md\n├── docker-compose.yml\n├── next.config.js                # next 配置，包括 webpack\n├── package-lock.json\n├── package.json\n├── query.gql                     # GraphQL Query/Mutation\n├── routes.js                     # 路由\n├── server.js                     # 应用程序入口\n└── theme.json\n```\n\n## 运行\n\n``` shell\n$ npm install\n\n# 开发\n$ npm run dev\n\n# 运行\n$ npm start\n\n# 部署/需要配置 CI\n$ git push origin master\n\n# 分析包大小\n$ npm run stat\n```\n\n## TODO\n\n+ [x] CI 自动部署\n+ [x] 自写工具函数替代 `lodash`，减小打包体积\n+ [x] 自写组件替代 `antd`，减小打包体积\n+ [x] robots/sitemap\n+ [x] 点击喜欢与会背时的 `Optimistic UI`\n+ [x] typescript 支持\n+ [ ] 添加经史子集\n+ [ ] 在诗词的赏析中为其所引用到的古籍添加链接\n+ [ ] eslint 支持\n+ [ ] Sentry 支持\n+ [ ] 图片优化\n+ [ ] 添加错误提示组件\n+ [ ] 更好的 dockerfile，更快的构建速度\n+ [ ] 更好的 CI pipeline\n+ [ ] 当出现 404 页面时，返回真正的 404 状态码，优化 SEO\n+ [ ] 状态优化: 在我的喜欢列表页面取消喜欢时，切回标签页不需要重新发送请求便能展示最新数据 (`List Optimistic UI`)\n\n## 打包体积优化记录\n\n今天(2019/07/22)觉得很有必要把优化打包体积的过程给记录一下，至于以前的优化记录，如 `antd` 与 `lodash` 依赖的移除，就不大详细记录了。\n\n记录时使用 `webpack-bundle-analyzer` 这个包分析打包体积，并且把每次的报告页面放在 `/static` 下，报告的命名为 `${date}-${commit}`。\n\n大致记录每次打包后服务端和客户端 `js` 总体积，以及首屏各项参数以及各种关键事件 (关键事件与机器，网络等也有很大相关性，仅做参考)。\n\n### 00: ~350KB\n\n刚开始写了两个页面，并且加上 `lodash` 和 `antd` 后的初始大小\n\n### 01: 191.64KB/242.74KB\n\n去除 `lodash` 与 `antd` 依赖，使打包体积大幅减小。这一步其实在半年前就已经做了，紧接着随后又写了很多页面与组件，所以在去除两者依赖后，真实的打包体积比现在还有缩减。\n\n+ [Server Stat](https://shici.xiange.tech/static/2019-07-22-25305f34/server.html)\n+ [Client Stat](https://shici.xiange.tech/static/2019-07-22-25305f34/client.html)\n\n### 02: 176.51KB/245.02KB\n\n集中 `gql` 管理后，在浏览器模式下可以把所有的 `query` 都是用 `loader` 打到 `common.js` 中，而这些零散的 `query` 在以前被按需加载时重复打包多次。\n\n+ [commit 01-02 diff](https://github.com/shfshanyue/shici/commit/99d0dd58eac0f5af7271626c82d3815bb7af943a)\n+ [Server Stat](https://shici.xiange.tech/static/2019-07-22-99d0dd58/server.html)\n+ [Client Stat](https://shici.xiange.tech/static/2019-07-22-99d0dd58/client.html)\n+ NetWwork statusBar: 18 requests | 223 KB transferred | 715 KB resources | Finish: 734 ms\n+ Event: DCL 156.6 ms | FP 183.1 ms | FCP 183.1 ms | FMP 183.1 ms | Load 691.7 ms\n\n### 03: 176.51KB/245.02KB\n\n与 02 数据大致一致，但是与 04 只差了一个 commit，但打包体积变化巨大。为了聚焦问题，所以记了下来。\n\n+ [Server Stat - 245.02KB](https://shici.xiange.tech/static/2019-07-31-5be6889/server.html)\n+ [Client Stat - 176.51KB](https://shici.xiange.tech/static/2019-07-31-5be6889/client.html)\n\n### 04: 176.52KB/193.25KB\n\n当去除了 `less` 后，发现服务端的包体积竟然下降了 50+ KB，在分析图中发现原因在多个页面少打了 `next` 包进去。至于为什么会减少这么多体积，以后再做分析，先把 Stat 图记录下来\n\n+ [commit 03-04 diff](https://github.com/shfshanyue/shici/commit/e94a1a5327623ed296dfe388eb6de6de829f084c)\n+ [Server Stat - 193.25KB](https://shici.xiange.tech/static/2019-07-31-e94a1a5/server.html)\n+ [Client Stat - 176.52KB](https://shici.xiange.tech/static/2019-07-31-e94a1a5/client.html)\n+ NetWwork statusBar: 18 requests | 223 KB transferred | 716 KB resources | Finish: 734 ms\n+ Event: DCL 156.6 ms | FP 183.1 ms | FCP 183.1 ms | FMP 183.1 ms | Load 691.7 ms\n\n## 关注我\n\n我一个关于前后端以及运维分享的公众号：记录我的学习与成长\n\n\u003cimg src=\"https://shanyue.tech/qrcode.jpg\" width=\"250\" height=\"250\"\u003e\n\n我一个关于诗词分享的公众号：每天分享一篇古诗文\n\n\u003cimg src=\"https://raw.githubusercontent.com/shfshanyue/shici/master/public/static/wechat.jpg\" width=\"250\" height=\"250\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshfshanyue%2Fshici","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshfshanyue%2Fshici","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshfshanyue%2Fshici/lists"}