Skip to content

Commit a2eda0b

Browse files
author
snailRun
committed
Merge remote-tracking branch 'origin/main'
# Conflicts: # public/feed.xml
2 parents 842bbcd + 758bfb6 commit a2eda0b

File tree

9 files changed

+166
-58
lines changed

9 files changed

+166
-58
lines changed

‎data/blog/post-10.mdx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: Next.js 项目太坑了，一个简单的样式库，就把项目玩坏了
3+
date: 2024-08-16T04:46:22Z
4+
slug: post-10
5+
author: chaseFunny：https://github.com/chaseFunny
6+
tags: ["bug","Next.js","踩坑记录"]
7+
---
8+
9+
离大谱，我引入一个库，然后就成功把 Next.js 项目干卡死，而且通过容器化部署，实例达到了惊人的 4 个，什么概念，后端服务的实例也就才三个。前端竟然 4 个。下面看看我的干了什么吧！
10+
11+
## 背景
12+
13+
最近在开发 Next.js 项目。有一个需求是把之前一个项目的功能搬到另外一个项目。写好的代码是 antd + tailwindcss 写的页面。新的项目是 Next.js + 没有tailwindcss 的。我就想能不能通过一个库直接把 tailwind 样式转为原生的样式。这样我就省事多了，确实是“省事”呢！
14+
15+
## 开发
16+
17+
于是我就去找 tailwind css 转为行内样式的库。还真让我找到了 [tw-to-css](https://www.npmjs.com/package/tw-to-css) 。看了它的简介，我就更加开心了。
18+
19+
![image-20240816085714940](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/typora/image-20240816085714940.png)
20+
21+
兼容客户端和服务端，而且减少构建时间，多好啊！我赶紧引入来使用它。使用它确实是很快就把原来的代码搬运到了新的项目，不需要再去定义 css 类，再创建 css 文件，写样式。但是我本地开发就发现，点击进入我的那个页面非常卡。最长达到了 13 秒，
22+
23+
![企业微信截图_119ad3f1-1bcf-4790-bc60-d87ec077a95b](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/typora/%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_119ad3f1-1bcf-4790-bc60-d87ec077a95b.png)
24+
25+
然后。我还专门去前端小分队群里问了一下，大家会不会。但是大家的意思就是这可能是正常的，**这也是我为什么一直都没有怀疑我的代码有问题的原因**，啊啊啊啊啊，如果是正常项目，我肯定会先检查我的代码是不是出问题了，但是，我刚启动这个项目的时候，这个 Next.js 项目就经常卡死，点击反应很慢，导致我以为我开发的这个新页面很慢也是正常的，是 Next.js 的服务端渲染的问题。
26+
27+
## 发现问题、找出问题
28+
29+
我就忍着这么卡，开发完成，直到上线，通过容器化部署，上线后，实例数达到了 4 ，我那个时候差不多就肯定，一定是我的代码写的有问题了，然后我就赶紧去紧急回滚到之前的代码再部署。然后我就去对比我这个新的页面和其他不卡的服务端渲染页面的区别。最终锁定了 `tw-to-css` ，我就把所有 `tw-to-css` 方法去掉，然后刷新，结果不到一秒就响应了。太快啦！
30+
31+
## 最小复现
32+
33+
我写一个代码进行最小复现，使用 tw-to-css 后，客户端组件和服务器组件都会卡死，我去看一下源码，它依赖了 tailwind css 库，下次必须要看看引入新的库的源码了，不能简单看一下简介就好，感兴趣可以去看看：https://github.com/coderPerseus/nextjs-with-antd/tree/tw-to-css-bug-show
34+
35+
![image-20240816084628119](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/typora/image-20240816084628119.png)
36+
37+
## 反思 & 总结
38+
39+
1. 引入新库时要谨慎评估其性能影响。仅仅依赖库的描述是不够的，应该进行充分的测试
40+
2. 不能忽视明显的性能问题。即使其他人认为可能是正常现象，也要深入调查
41+
3. 在开发过程中引入新的库要进行性能检查和打包部署验证，不要等到部署后才发现问题
42+
4. 对于 Next.js 项目，要特别注意服务端渲染的性能。某些库可能在客户端运行良好，但在服务端会造成严重的性能问题
43+
5. 保持代码的简洁和模块化，这样在遇到问题时更容易定位和解决
44+
45+
不知道你们在开发 Next.js 的时候遇到了什么样的坑，分享一下，大家互相转发，不再吃这种亏
46+
47+
---
48+
此文自动发布于：<a href="https://github.com/coderPerseus/blog/issues/10" target="_blank">github issues</a>

‎data/blog/post-9.mdx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: 什么是 Unix 哲学 ？
3+
date: 2024-08-10T11:47:24Z
4+
slug: post-9
5+
author: chaseFunny：https://github.com/chaseFunny
6+
tags: ["Unix 哲学","名词解释"]
7+
---
8+
9+
> 在看文章：https://www.ruanyifeng.com/blog/2017/08/koa.html 的时候，了解到 Unix 哲学 ，就学习记录一下。下面是 AI 的回复：
10+
11+
Unix 哲学是一套软件设计和开发的指导原则，源于 Unix 操作系统的创建和演进过程。这种哲学强调简单性、模块化和可组合性。以下是 Unix 哲学的核心要点：
12+
13+
1. 做一件事，并做好它：每个程序应该专注于完成一个特定的任务，并且做到最好。这种专注使得程序更容易理解、维护和改进。
14+
15+
2. 程序之间的协作：设计程序时应考虑到它们可以与其他程序协同工作。这种方法鼓励创建可以轻松组合在一起的小型、专门化的工具。
16+
17+
3. 文本流作为通用接口：使用文本流作为程序之间交换数据的主要方式。文本是一种通用的、人类可读的格式，可以被各种工具处理和操作。
18+
19+
4. 模块化设计：鼓励将复杂的系统分解成更小、更易管理的部分。这使得系统更容易理解、维护和扩展。
20+
21+
5. 组合而非扩展：当需要新功能时，优先考虑创建新的模块并将其与现有模块组合，而不是通过添加新特性来使现有程序变得复杂。
22+
23+
6. 简洁性：保持程序和接口的简单。这不仅使程序更容易理解和使用，也减少了出错的可能性。
24+
25+
7. 可移植性：编写可以在不同环境中运行的程序，而不是依赖于特定的系统特性。
26+
27+
8. 透明性：程序的行为应该是可预测的，其操作应该是可见和可理解的。
28+
29+
9. 灵活性：设计能够适应未预见的用途的程序。这种灵活性使得程序可以在各种不同的场景中被重用。
30+
31+
10. 数据流处理：设计能够处理数据流的程序，因为这是一种通用的接口。
32+
33+
Unix 哲学的实践不仅限于 Unix 系统，它已经影响了许多现代软件开发实践，包括微服务架构、函数式编程和 DevOps 文化。这种哲学鼓励开发者创建简单、模块化、可组合的软件，这些软件可以灵活地应对各种挑战和需求。
34+
35+
---
36+
此文自动发布于：<a href="https://github.com/coderPerseus/blog/issues/9" target="_blank">github issues</a>

‎public/feed.xml‎

Lines changed: 50 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,18 @@
44
<description><![CDATA[我是幸运的蜗牛，一名充满热情的前端开发工程师。我热衷于探索和体验最新技术，特别是人工智能（AI），并在日常工作中去使用它们，来提升我的工作效率。我的目标是积极参与开源社区，为开源项目贡献自己的力量。正如我的名字，我相信越努力，越幸运]]></description>
55
<link>https://luckysnail.cn</link>
66
<generator>RSS for Node</generator>
7-
<lastBuildDate>Tue, 13 Aug 2024 02:55:25 GMT</lastBuildDate>
7+
<lastBuildDate>Thu, 15 Aug 2024 14:48:38 GMT</lastBuildDate>
88
<atom:link href="https://luckysnail.cn/feed.xml" rel="self" type="application/rss+xml"/>
9-
<item>
10-
<title><![CDATA[记录我写的烂代码]]></title>
11-
<link>https://luckysnail.cn/posts/post-5</link>
12-
<guid isPermaLink="true">https://luckysnail.cn/posts/post-5</guid>
13-
</item>
149
<item>
1510
<title><![CDATA[git commit 提交规范中文解释]]></title>
1611
<link>https://luckysnail.cn/posts/post-4</link>
1712
<guid isPermaLink="true">https://luckysnail.cn/posts/post-4</guid>
1813
</item>
14+
<item>
15+
<title><![CDATA[记录我写的烂代码]]></title>
16+
<link>https://luckysnail.cn/posts/post-5</link>
17+
<guid isPermaLink="true">https://luckysnail.cn/posts/post-5</guid>
18+
</item>
1919
<item>
2020
<title><![CDATA[对萝卜快跑的一些观点]]></title>
2121
<link>https://luckysnail.cn/posts/post-6</link>
@@ -26,6 +26,11 @@
2626
<link>https://luckysnail.cn/posts/post-7</link>
2727
<guid isPermaLink="true">https://luckysnail.cn/posts/post-7</guid>
2828
</item>
29+
<item>
30+
<title><![CDATA[什么是 Unix 哲学 ？]]></title>
31+
<link>https://luckysnail.cn/posts/post-9</link>
32+
<guid isPermaLink="true">https://luckysnail.cn/posts/post-9</guid>
33+
</item>
2934
<item>
3035
<title><![CDATA[当我开始编程时我希望知道的 65 件事]]></title>
3136
<link>https://luckysnail.cn/posts/65-things-need-konw</link>
@@ -37,75 +42,55 @@
3742
<guid isPermaLink="true">https://luckysnail.cn/posts/code-manager</guid>
3843
</item>
3944
<item>
40-
<title><![CDATA[关于 luckySnail]]></title>
41-
<link>https://luckysnail.cn/posts/about</link>
42-
<guid isPermaLink="true">https://luckysnail.cn/posts/about</guid>
43-
</item>
44-
<item>
45-
<title><![CDATA[一名普通前端开发的絮絮叨 - 2023]]></title>
46-
<link>https://luckysnail.cn/posts/end-2023</link>
47-
<guid isPermaLink="true">https://luckysnail.cn/posts/end-2023</guid>
48-
</item>
49-
<item>
50-
<title><![CDATA[前端程序员学习 Docker 的笔记 （-）]]></title>
51-
<link>https://luckysnail.cn/posts/docker-learn-1</link>
52-
<guid isPermaLink="true">https://luckysnail.cn/posts/docker-learn-1</guid>
45+
<title><![CDATA[前端程序员学习 Docker 的笔记 （二）]]></title>
46+
<link>https://luckysnail.cn/posts/docker-learn-2</link>
47+
<guid isPermaLink="true">https://luckysnail.cn/posts/docker-learn-2</guid>
5348
</item>
5449
<item>
5550
<title><![CDATA[《繁花》中让人惊艳的台词]]></title>
5651
<link>https://luckysnail.cn/posts/fan-hua</link>
5752
<guid isPermaLink="true">https://luckysnail.cn/posts/fan-hua</guid>
5853
</item>
5954
<item>
60-
<title><![CDATA[前端程序员学习 Docker 的笔记 （二）]]></title>
61-
<link>https://luckysnail.cn/posts/docker-learn-2</link>
62-
<guid isPermaLink="true">https://luckysnail.cn/posts/docker-learn-2</guid>
63-
</item>
64-
<item>
65-
<title><![CDATA[一个普通三本如何自学成为前端开发者]]></title>
66-
<link>https://luckysnail.cn/posts/frontend-learn-line-1</link>
67-
<guid isPermaLink="true">https://luckysnail.cn/posts/frontend-learn-line-1</guid>
55+
<title><![CDATA[一篇文章讲清楚 React Element、React Component、JSX、Fiber 以及Diff算法的概念及其相互关系]]></title>
56+
<link>https://luckysnail.cn/posts/fiber-learn</link>
57+
<guid isPermaLink="true">https://luckysnail.cn/posts/fiber-learn</guid>
6858
</item>
6959
<item>
7060
<title><![CDATA[记录第一次当项目负责人感受]]></title>
7161
<link>https://luckysnail.cn/posts/first-project-manager-record</link>
7262
<guid isPermaLink="true">https://luckysnail.cn/posts/first-project-manager-record</guid>
7363
</item>
7464
<item>
75-
<title><![CDATA[一篇文章讲清楚 React Element、React Component、JSX、Fiber 以及Diff算法的概念及其相互关系]]></title>
76-
<link>https://luckysnail.cn/posts/fiber-learn</link>
77-
<guid isPermaLink="true">https://luckysnail.cn/posts/fiber-learn</guid>
65+
<title><![CDATA[一个普通三本如何自学成为前端开发者]]></title>
66+
<link>https://luckysnail.cn/posts/frontend-learn-line-1</link>
67+
<guid isPermaLink="true">https://luckysnail.cn/posts/frontend-learn-line-1</guid>
68+
</item>
69+
<item>
70+
<title><![CDATA[2024 年中总结]]></title>
71+
<link>https://luckysnail.cn/posts/mid-year-2024</link>
72+
<guid isPermaLink="true">https://luckysnail.cn/posts/mid-year-2024</guid>
7873
</item>
7974
<item>
8075
<title><![CDATA[前端学习路线（自学版）]]></title>
8176
<link>https://luckysnail.cn/posts/frontend-learn-line-2</link>
8277
<guid isPermaLink="true">https://luckysnail.cn/posts/frontend-learn-line-2</guid>
8378
</item>
84-
<item>
85-
<title><![CDATA[GitHub copilot chat 体验]]></title>
86-
<link>https://luckysnail.cn/posts/github-copilot-chat-use</link>
87-
<guid isPermaLink="true">https://luckysnail.cn/posts/github-copilot-chat-use</guid>
88-
</item>
8979
<item>
9080
<title><![CDATA[2023 年中终结]]></title>
9181
<link>https://luckysnail.cn/posts/mid-year-summary-2023</link>
9282
<guid isPermaLink="true">https://luckysnail.cn/posts/mid-year-summary-2023</guid>
9383
</item>
94-
<item>
95-
<title><![CDATA[React 新手常犯的十个错误]]></title>
96-
<link>https://luckysnail.cn/posts/react-error</link>
97-
<guid isPermaLink="true">https://luckysnail.cn/posts/react-error</guid>
98-
</item>
99-
<item>
100-
<title><![CDATA[2024 年中总结]]></title>
101-
<link>https://luckysnail.cn/posts/mid-year-2024</link>
102-
<guid isPermaLink="true">https://luckysnail.cn/posts/mid-year-2024</guid>
103-
</item>
10484
<item>
10585
<title><![CDATA[React最简版本低代码实现]]></title>
10686
<link>https://luckysnail.cn/posts/react-drag-drop-demo</link>
10787
<guid isPermaLink="true">https://luckysnail.cn/posts/react-drag-drop-demo</guid>
10888
</item>
89+
<item>
90+
<title><![CDATA[React 新手常犯的十个错误]]></title>
91+
<link>https://luckysnail.cn/posts/react-error</link>
92+
<guid isPermaLink="true">https://luckysnail.cn/posts/react-error</guid>
93+
</item>
10994
<item>
11095
<title><![CDATA[微信小程序如何引入图标]]></title>
11196
<link>https://luckysnail.cn/posts/use-iconfont-in-wechat-miniprogram</link>
@@ -116,5 +101,25 @@
116101
<link>https://luckysnail.cn/posts/redis-learn</link>
117102
<guid isPermaLink="true">https://luckysnail.cn/posts/redis-learn</guid>
118103
</item>
104+
<item>
105+
<title><![CDATA[关于 luckySnail]]></title>
106+
<link>https://luckysnail.cn/posts/about</link>
107+
<guid isPermaLink="true">https://luckysnail.cn/posts/about</guid>
108+
</item>
109+
<item>
110+
<title><![CDATA[一名普通前端开发的絮絮叨 - 2023]]></title>
111+
<link>https://luckysnail.cn/posts/end-2023</link>
112+
<guid isPermaLink="true">https://luckysnail.cn/posts/end-2023</guid>
113+
</item>
114+
<item>
115+
<title><![CDATA[GitHub copilot chat 体验]]></title>
116+
<link>https://luckysnail.cn/posts/github-copilot-chat-use</link>
117+
<guid isPermaLink="true">https://luckysnail.cn/posts/github-copilot-chat-use</guid>
118+
</item>
119+
<item>
120+
<title><![CDATA[前端程序员学习 Docker 的笔记 （-）]]></title>
121+
<link>https://luckysnail.cn/posts/docker-learn-1</link>
122+
<guid isPermaLink="true">https://luckysnail.cn/posts/docker-learn-1</guid>
123+
</item>
119124
</channel>
120125
</rss>

‎public/og.png‎

325 KB
Loading

‎public/police.png‎

18.8 KB
Loading

‎scripts/generate-rss.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ async function generate() {
3131

3232
// 扁平化文件列表
3333
const flattenedPosts = allPosts.flat();
34-
console.log(flattenedPosts, 'flattenedPosts');
3534
await Promise.all(
3635
flattenedPosts.map(async ({ file, folder }) => {
3736
const content = await fs.readFile(path.join(folder, file));

‎src/components/Footer.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { PeekabooLink } from '@/components/links/PeekabooLink';
22
import siteMetadata from '@/config/site';
3+
import Image from 'next/image';
34
import Link from 'next/link';
45
import React from 'react';
56
import { Container } from './Container';
@@ -59,6 +60,21 @@ export function Footer() {
5960
欢迎 👏🏻 你的访问
6061
</div>
6162
</Container.Inner>
63+
<Link
64+
target="_blank"
65+
href="https://beian.miit.gov.cn/"
66+
className="absolute text-blue-600 w-full bottom-6 left-1/2 -translate-x-1/2 flex justify-center items-center"
67+
>
68+
<Image
69+
unoptimized
70+
src={'/police.png'}
71+
width={18}
72+
height={18}
73+
alt="备案"
74+
className="mr-1 "
75+
/>
76+
浙ICP备2021039023号-3
77+
</Link>
6278
</div>
6379
</Container.Outer>
6480
</footer>

‎src/components/NavigationBar.tsx‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -35,16 +35,16 @@ const DropdownNavItem = ({
3535
{children}
3636
</NavigationMenuTrigger>
3737
<NavigationMenuContent>
38-
{siteMetadata.moreItems[href] &&
39-
siteMetadata.moreItems[href]?.map((item) => (
40-
<Link
41-
key={item.href}
42-
className="group flex w-full items-center gap-2 rounded-lg px-3 py-1.5 data-[focus]:bg-white/10"
43-
href={item.href}
44-
>
45-
{item.text}
46-
</Link>
47-
))}
38+
{siteMetadata.moreItems[href]?.map((item) => (
39+
<Link
40+
prefetch
41+
key={item.href}
42+
className="group flex w-full items-center gap-2 rounded-lg px-3 py-1.5 data-[focus]:bg-white/10"
43+
href={item.href}
44+
>
45+
{item.text}
46+
</Link>
47+
))}
4848
</NavigationMenuContent>
4949
</NavigationMenuItem>
5050
</NavigationMenuList>
@@ -93,7 +93,11 @@ function NavItem({
9393
</>
9494
</DropdownNavItem>
9595
) : (
96-
<Link href={href}>
96+
<Link
97+
href={href}
98+
prefetch
99+
target={href === '/feed.xml' ? '_blank' : '_self'}
100+
>
97101
{children}
98102
{isActive && <ActiveBox />}
99103
</Link>

‎src/config/site.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const baseSiteConfig: SiteConfig = {
1111
'我是幸运的蜗牛，一名充满热情的前端开发工程师。我热衷于探索和体验最新技术，特别是人工智能（AI），并在日常工作中去使用它们，来提升我的工作效率。我的目标是积极参与开源社区，为开源项目贡献自己的力量。正如我的名字，我相信越努力，越幸运',
1212
url: url.href, //'https://luckysnail.cn/',
1313
// 网站预览图
14-
ogImage: '',
14+
ogImage: url.origin + '/og.png',
1515
// https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase
1616
metadataBase: '/',
1717
keywords: [

0 commit comments

Comments
 (0)