# 1、标题党嫌疑

首先，我要承认在前一篇文章中，[前端性能优化 (提升 13 倍)](https://mp.weixin.qq.com/s?__biz=Mzg3ODk3MTk0Nw==&mid=2247483770&idx=1&sn=8f8f96fc0e10e7343a2498db77d6a0c0&chksm=cf0adc3ef87d5528d4c8019f8a940f206f525f6175154e4f4f4fabca193d1c30e76d5114d074#rd)  
我的标题确实有点标题党的嫌疑。虽然我在实际操作中发现了一些明显的性能提升，但对于大家关心的加载速度来说，提升并不是特别显著。这里，我向大家道歉。




# 2、JS瘦身效果

虽然JS瘦身0.4MB对加载速度影响不大，但它确实在打包速度上有了明显提升，这对开发者来说是一个好消息。同时，我想强调的是，资源包替换也算是一种性能优化的手段。虽然效果可能没有预期的那么明显，但它确实帮助我们在某种程度上优化了性能。

# 3、按需导入与全局导入

在前一篇文章中，我提到遇到了一些问题，没有实现按需导入，而选择了全局导入。现在，在经过专业前端大佬的指导后，我已经解决了这个问题，并成功实现了按需导入。
## 3.1 局部导入
将全局导入改为局部导入后，打包后的JS从18MB降低到了17MB，但实际浏览器传输数值并没有变化，仍为1.1MB。  
![image-20230428222312626](https://img.huacai.one/image-20230428222312626.webp)
![image-20230428230457350](https://img.huacai.one/image-20230428230457350.webp)

## 3.2
但一个更大的收获是，我发现并注释掉了一个未使用的组件（echarts），使得JS从17MB降低到了12MB，浏览器网络传输也降低到了806KB。 从一开始的1.5M，经过两轮操作后，降低700KB，算是小一半的体积了，效果还算蛮不错？  
![image-20230428225756590](https://img.huacai.one/image-20230428225756590.webp)
![image-20230428231151199](https://img.huacai.one/image-20230428231151199.webp)

# 4、CDN的应用

关于CDN，实际上我已经在项目中进行了应用。
## 4.1 使用CloudFlare CDN
> https://fast.huacai.one/fastrunner/login  
> test
> test2020

<img src="https://img.huacai.one/image-20230429090554363.webp" alt="image-20230429090554363" style="zoom:50%;" />  

测了好几遍，都是强制刷新，没缓存。速度不够稳定，有时候400多ms，有时候1s多，有时候5s。    
毕竟是免费，还是海外节点，将就用着吧  

## 4.2 腾讯云直连对比
> http://119.91.147.215/fastrunner/login  
> test
> test2020


<img src="https://img.huacai.one/image-20230429091431055.webp" alt="image-20230429091431055" style="zoom:50%;" />
<img src="https://img.huacai.one/image-20230429091535147.webp" alt="image-20230429091535147" style="zoom:50%;" />
第二张首页加载很快，但是不知道两张小图片加载那么慢，不理解啊。虽然不影响使用，但还是有那么点不爽

# 5、总结

再次感谢大家的反馈与指导。这次的优化尝试让我收获了很多，也让我更加深入地认识到性能优化的重要性。我会继续努力，寻找更多的性能优化手段，为大家带来更好的用户体验。同时，我也希望大家能够多多指教，让我们共同进步。

再聊前端优化,性能小幅提升?

# 1、背景
有好几个童鞋跟我反馈，你测试平台在线demo加载好慢啊

慢确实是慢，但这事情不能赖我呀，肯定是腾讯云的锅。  

腾讯云8m带宽的服务器，可是我斥巨资购入的呀



<img src="https://img.huacai.one/image-20230426203251930.webp" alt="image-20230426203251930" style="zoom: 50%;" />

<img src="https://img.huacai.one/image-20230426203746466.webp" alt="image-20230426203746466" style="zoom:50%;" />

这可是价值5040元的服务器啊！（虽然实付只是198😝）

<img src="https://img.huacai.one/image-20230426204038997.webp" alt="image-20230426204038997" style="zoom:50%;" />

好家伙，续费的时候，加了这个峰值带宽是啥意思？那我现在的带宽是不是8M？我还真测了一下

![image-20230426205126674](https://img.huacai.one/image-20230426205126674.webp)

腾讯云大佬如果看到了，别打我，我不是黑腾讯云，只是想引起你们的注意（万一把我招进去了呢）

算了，算了。这个锅还是我自己来背

# 2、为什么慢？
打开Chrome开发者工具，一看（chuck-xxx.js忽略，是我自己安装Chrome插件的js）

![image-20230426205613332](https://img.huacai.one/image-20230426205613332.webp)

vendor.xxxx.js是啥，为啥这么大？

问一下ChatGPT

![image-20230426205956156](https://img.huacai.one/image-20230426205956156.webp)

哦，原来是第三方依赖啊，那到底依赖了啥

通过`webpack-bundle-analyzer`分析，可以看到`monaco-editor`这个模块占大头，超过1/3了!

然而在项目中，只有一个地方用到，这太不合理，要干掉！

![image-20230426193205800](https://img.huacai.one/image-20230426193205800.webp)

# 3、优化方案

`monaco-editor`很强，很优秀（你是个好人，但我们不合适）

既然`monaco-editor`很大，但编辑器还是得有，那用啥来代替呢？

那还是继续问一下ChatGPT

![image-20230426210639860](https://img.huacai.one/image-20230426210639860.webp)

## 3.1 CodeMirror方案

CodeMirror这个是比较出名的，在虾皮的时候，看前端同学也是用了这个。

那就先用这个是试试。

哦豁，这东西默认安装是vue3版本，然而当前项目是vue2

降低版本到适配vue2的版本

结果问题又来，这玩意默认高度是300px，真的坑，初始化的配置还不能直接设置高度

一顿操作后，菜鸡如我，并没有解决这个问题，暂时放弃

![image-20230426211206152](https://img.huacai.one/image-20230426211206152.webp)

## 3.2 Ace方案

所幸CodeMirror翻车后，还有plan B，那就Ace，看ChatGPT的回答，应该更加符合这次的需求

那就选它了！

用Ace替换掉Monaco之后

看看webpack-bundle-analyzer，app.js从15.82MB降低到了10.19MB，降低5.63MB

前面看到的Monaco是6.1MB，算下来Ace就是0.47MB，Monaco是Ace的12.98倍（标题有了）！

![image-20230426193131143](https://img.huacai.one/image-20230426193131143.webp)

# 4、收益

## 4.1 打包容量

打包整体的容量减少了14M！

![image-20230426213311695](https://img.huacai.one/image-20230426213311695.webp)

## 4.2 打包速度

打包时间缩短约36s，相当可观呀！

![image-20230426213527039](https://img.huacai.one/image-20230426213527039.webp)

## 4.3 首页加载容量

减少了0.4MB，看着不算很大？不行，我就想吹一下

![image-20230426214019478](https://img.huacai.one/image-20230426214019478.webp)

## 4.4 首页加载速度

可以通过下面两个地址实测

[CloudFlare CDN访问](https://fast.huacai.one/fastrunner/login)

[腾讯云访问](http://119.91.147.215/fastrunner/login)

账号密码
test
test2020



# 5、总结

引用一句Facebook(现在Meta)著名的口号和价值观

"Done is better than perfect"（完成比完美更好)

目前项目完成度比较高了（仅限接口层面）

性能方面做一些调整还是必要的

前端性能优化(提升13倍)

:::danger{title="白嫖就是好啊"}
这次又来白嫖Github + DockerHub完成CI/CD!
:::



# 什么是CI/CD？让你的项目变得更加敏捷！

在今天这个快速变化的时代，开发者们需要与时俱进，不断提升自己的工作效率。在这篇文章里，将一起探讨如何使用CI/CD和Github Action让你的项目更加高效，快速响应市场变化。

## 什么是CI？

CI（持续集成，Continuous Integration）是一种软件开发实践，它要求开发者频繁地将代码集成到共享的主干分支中。每次集成都会触发自动化的构建和测试，以便尽早发现和修复问题，减少整体风险。

## 什么是CD？

CD（持续交付和持续部署，Continuous Delivery/Deployment）是一种紧密跟随CI的实践。它要求在一个自动化的、可复制的环境中，持续地将软件交付给客户或部署到生产环境。这样可以确保软件始终处于可交付或可部署的状态。

## 使用CI/CD的目的

采用CI/CD的主要目的是提高软件开发过程的效率和质量，从而加快交付速度，缩短反馈周期，降低风险，提高客户满意度。CI/CD在敏捷开发、DevOps等现代软件开发方法中扮演着核心角色。

# Github Action是什么

Github Action是GitHub提供的一项自动化服务，它允许你在GitHub仓库中直接定义、构建和执行CI/CD流水线。你可以创建自定义的工作流程，以响应各种事件，如代码提交、Pull Request或者定时任务。

## 如何在自己的项目上使用Github Action

1. 在你的GitHub仓库中创建一个名为`.github/workflows`的目录。
2. 在该目录中创建一个YAML文件，如`ci-cd.yml`，来定义你的工作流程。
3. 编辑YAML文件，编写工作流程的各个步骤，如检出代码、构建、测试、部署等。
4. 提交YAML文件到仓库，Github Action会自动执行你定义的工作流程。

## Github + DockerHub等于CI/CD

通过将Github Action与DockerHub等其他服务相结合，你可以更轻松地实现CI/CD。例如，你可以将构建好的Docker镜像推送到DockerHub，然后使用Kubernetes等工具将镜像部署到生产环境。

# 如何利用Github Action实现CI/CD：一个实战案例

在前面的文章中，已经了解了CI/CD的基本概念和Github Action的功能。接下来，将通过一个[实际的Github项目](https://github.com/lihuacai168/AnotherFasterRunne)来详细介绍如何使用Github Action实现CI/CD流程。

以下是整个CI/CD过程的简要概述：

1. 定义workflow
2. 本地修改代码
3. 创建PR（Pull Request）
4. 合并PR
5. workflow自动触发完成CI/CD

具体步骤如下：

## 1. 定义workflow

在你的GitHub仓库中创建一个名为`.github/workflows`的目录，然后创建一个YAML文件，如`ci-cd.yml`，用于定义你的CI/CD流程。具体可以看看[这里](https://github.com/lihuacai168/AnotherFasterRunner/actions)

<img src="https://img.huacai.one/huacai-blog/b973c3918de569cbffea5c045337b877.image.webp" alt="image.png" style="zoom:50%;" />

## 2. 本地修改代码

在本地环境中修改代码并进行测试，确保代码的质量和可用性。

## 3. 创建PR（Pull Request）

将本地修改的代码提交到GitHub仓库，并创建一个PR，以便其他团队成员进行代码审查（呜呜呜，然而我没有其他成员）。

## 4. 合并PR

在代码审查通过后，合并PR到主干分支。

## 5. workflow自动触发完成CI/CD

一旦PR被合并，Github Action会自动触发定义好的workflow。在本案例中，workflow将完成以下任务：

### CI：自动构建Docker镜像，推送到DockerHub

1. 检出代码：Github Action会自动将最新的代码检出到工作环境中。
2. 构建Docker镜像：根据项目中的`Dockerfile`，构建新的Docker镜像。
3. 推送Docker镜像到DockerHub：将构建好的Docker镜像推送到DockerHub，以便其他人可以轻松获取和使用。

### CD：自动拉取最新Docker镜像，启动项目，并重启相关服务

1. 登录部署服务器：通过SSH登录到目标服务器。
2. 拉取最新Docker镜像：从DockerHub拉取最新版本的Docker镜像。
3. 启动项目：运行新的Docker镜像，启动项目实例。
4. 重启相关服务：如果项目依赖其他服务，例如Ngin等，确保这些服务也被正确地重启。

```mermaid
sequenceDiagram
    participant Dev as Developer
    participant Repo as GitHub Repository
    participant GHAction as GitHub Action
    participant DockerHub as Docker Hub
    participant Server as Deployment Server

    Dev->>Repo: Push local changes
    Dev->>Repo: Create Pull Request
    Dev->>Repo: Merge Pull Request
    Repo->>GHAction: Trigger CI/CD workflow
    GHAction->>Repo: Checkout code
    GHAction->>GHAction: Build Docker image
    GHAction->>DockerHub: Push Docker image
    GHAction->>Server: SSH login
    GHAction->>Server: Pull latest Docker image
    GHAction->>Server: Start project instance
    GHAction->>Server: Restart related services
```
在这个时序图中，可以看到整个实战案例中的CI/CD流程。首先，开发者将本地的更改推送到GitHub仓库，并创建并合并Pull Request。当Pull Request被合并时，GitHub Action会自动触发CI/CD工作流程。接下来，GitHub Action会执行一系列操作，包括检出代码、构建Docker镜像、推送镜像到Docker Hub以及登录部署服务器、拉取最新镜像、启动项目实例并重启相关服务。这个时序图可以帮助你更直观地理解CI/CD的过程。

# Github Action的优劣势

### 优势
1. 与GitHub仓库紧密集成，方便使用。
2. 支持丰富的事件触发器和可自定义的工作流程。
3. 免费额度较为充足，适合个人项目和小团队。
4. 有大量的开源Action可供选择，可以节省时间和精力。

### 劣势
1. 对于大型项目和企业级用户，可能需要更高的性能和更多的资源，而Github Action的免费额度有限。
2. 与第三方服务的集成可能不如专业的CI/CD平台灵活。
3. 部分高级功能需要付费使用。

在这里，非常希望听到你关于CI/CD和Github Action的看法。你是否已经在项目中应用了这些实践？你认为它们如何帮助你提高效率和质量？请在评论区留下你的想法，让我们一起交流、学习、进步！

如果你喜欢这篇文章，别忘了点赞、分享和关注我的博客，以便在第一时间获取更多关于科技、编程和创新的精彩内容！我们期待与你一起成长！

白嫖GitHub Action实现开源项目CICD

:::info{title="一些问题"}
- 为什么不用Halo，WordPress，插件多，社区成熟，不挺好吗？
- 为什么不用静态博客，VuePress，Hexo，Hugo这些贼好看啊
- 用现成的不好吗？掘金，CSDN，SegmentFault，知乎，博客园也挺好的啊

那么下面是我的回答
:::

**统一回答：嘻嘻，你们说的都对，但我不听😁**

# 1、购买服务器

> 如果你不熟悉linux的话，建议选择centos7，下面的操作都是以这个为例

## 1.1 RackNerd [点这里购买](https://my.racknerd.com/aff.php?aff=7556&pid=681)
> 2核2G  
> 4000GB/月，完全够用  
> 1TB上传带宽!  实测！  
> 仅需21美元一年  
> 
![image.png](https://img.huacai.one/huacai-blog/87db94c7bb4ef3b6507201bc46815a56.image.webp)


**实现速度和延迟都挺不错**
`wget -qO- git.io/superbench.sh | bash`
![image.png](https://img.huacai.one/huacai-blog/74dcf32904e3f91b09d816dde4dd3ccc.image.webp)

# 2、安装Docker和必要软件
[参考这里](https://blog.huacai.one/post/2)


# 3、部署博客

## 3.1 一键部署
```shell
curl -sSL -o setup_blog.sh https://raw.githubusercontent.com/lihuacai168/blog/main/setup_blog.sh
chmod +x setup_blog.sh
./setup_blog.sh

```
## 3.2 手动部署
- 创建博客文件夹
`mkdir ~/myblog && cd myblog`

- 编写`docker-compose.ym`l文件

```dockerfile
version: "3"

services:
  vanblog:
    image: mereith/van-blog:latest
    restart: always
    environment:
      TZ: "Asia/Shanghai"
      # 邮箱地址，用于自动申请 https 证书
      # 改成你的邮箱
      EMAIL: "xxx@gmail.com"
    volumes:
      # 图床文件的存放地址，按需修改。
      - ${PWD}/data/static:/app/static
      # 日志文件
      - ${PWD}/log:/var/log
      # Caddy 配置存储
      - ${PWD}/caddy/config:/root/.config/caddy
      # Caddy 证书存储
      - ${PWD}/caddy/data:/root/.local/share/caddy
    ports:
      # 这里1180是对外暴露的端口，公网可以直接访问
      - 1180:80
      
      # 禁止端口直接访问可以使用
      # 172.17.0.1是docker0网卡的ip
      # - "172.17.0.1:1180:80"
      
  mongo:
    # 某些机器不支持 avx 会报错，所以默认用 v4 版本。有的话用最新的。
    image: mongo:4.4.16
    #image: mongo:latest
    restart: always
    environment:
      TZ: "Asia/Shanghai"
    volumes:
      - ${PWD}/data/mongo:/data/db
```

- 启动docker-compose

`docker-compose up -d`

- 访问博客
`http://你的服务器ip:1180`
这里的1180可以在docker-compose.yml的对外暴露端口修改

![image.png](https://img.huacai.one/huacai-blog/f9165e2c939b5e1bdf268885eb7c1673.image.webp)


# 4、配置域名访问 + CDN

## 4.1 购买域名
[点击这里购买域名](https://www.namesilo.com/?rid=fee9c40iv)

## 4.2 域名解析+CDN

[CloudFlare域名解析+CDN](https://dash.cloudflare.com/)

## 4.3 NPM配置方向代理
[参加考这里](https://blog.huacai.one/post/9)

搭建花菜同款博客

# 1、背景
近期，我决定将测试平台迁移到国外的 VPS 上。由于 VPS 的配置相当有限，只有 2G 的内存，而且已有多个服务在上面运行，内存占用已达 70%多。在如此紧张的资源环境下，降低测试平台后端的线程数量，期望能减少资源占用。  
 
原来的启动命令是：
```
# 容器中django启动命令，使用gunicorn默认的worker pool（同步)
# -w4 起4个worker
/usr/local/bin/python -m gunicorn FasterRunner.wsgi_docker -b 0.0.0.0 -w4
```
![image-20230420111105635](https://img.huacai.one/image-20230420111105635.webp)

修改后的启动命令是：

```
# 容器中django启动命令，使用gunicorn默认的worker pool（同步），默认起1个worker
/usr/local/bin/python -m gunicorn FasterRunner.wsgi_docker -b 0.0.0.0
```

![image-20230420110714548](https://img.huacai.one/image-20230420110714548.webp)

内存确实有明显的下降，少了200M+，对于内存捉急的小机器，还是相当可观！

# 2、发现问题

但是！！！在修改后，验证发现请求外部接口是正常的，请求测试平台内部接口时会发生超时现象。  
用celery异步执行用例，定时任务啥的都没问题  
这让我百思不得其解，心中充满了困惑。看完 log 之后，还是无法找到问题所在。

你看请求外部接口，妥妥的
![image-20230420093217587](https://img.huacai.one/image-20230420093217587.webp)

请求测试平台内部接口，执行超时

![image-20230420093342831](https://img.huacai.one/image-20230420093342831.webp)

# 3、排查问题

## 3.1 排查gunicorn命令
第一个怀疑的对象就是gunicorn命令，但想了一下，请求外部接口是好的啊，平台接口都能正常的跑；请求测试平台内部才有问题，那会不会是基础镜像问题？

## 3.2 排查Python基础镜像
第二个怀疑对象是 Python 基础镜像。尽管我之前从 python-alpine 更换为 python-buster 已经验证过，但我决定在本地再次尝试回滚到 python-alpine。（至于为什么更换镜像，那又是另一个事情了）  
然而，问题仍然存在。这让我更加困惑，因为目前部署在腾讯云就是用python-alpine，在海外vps使用的python-buster，两个明明可以正常运行。

这就有点尴尬了啊，似乎都没啥问题，只是请求测试平台内部接口有问题。
要不先这样就发布算了，反正正常使用都是请求外部接口，没啥影响？
开玩笑，那当然不行，明显不符合我的风格呀！况且演示demo就是请求内部接口啊！

# 4、验证问题

于是在 ChatGPT 上查询了 Gunicorn 的 worker pool，发现默认的 worker 是 1，并且是同步的。

![image-20230420093630179](https://img.huacai.one/image-20230420093630179.webp)

这时，我觉得问题可能出在这里。我回想起在虾皮工作时，Django 项目也是使用 Gunicorn 部署，并且 worker pool使用的是协程，这样更节省资源。于是，我决定尝试使用 Gunicorn + 协程 worker 的方式。
```shell
# 容器中django启动命令，使用gunicorn + gevent worker pool（异步)
# -w4，启动4个worker
/usr/local/bin/python -m gunicorn FasterRunner.wsgi_docker -b 0.0.0.0 -w4 -k gevent
```

果不其然，问题得到了解决！
请求外部接口和测试平台内部接口都是妥妥的！

![image-20230420094224385](https://img.huacai.one/image-20230420094224385.webp)

我立刻兴奋起来，再次切换回单线程启动命令，发现问题可以复现。证实问题确实出在 worker 这里。

经过深思熟虑，我意识到了问题的关键所在：

单线程的同步 worker 只能同时处理一个请求。执行API测试时就占用了一个线程，这时已经没有多余的线程来处理其他请求，刚好这个API测试恰好请求到了内部接口，所以这个请求就只能在那里干等，直到最后超时失败！

并且这期间，整个测试平台的所有接口都无法处理，都会卡住！！！



# 5、思考

那么问题了，gunicorn worker pool换成协程之后，4个worker是完全没问题的

```shell
# 容器中django启动命令，使用gunicorn + gevent worker pool（异步)
# -w4，启动4个worker
/usr/local/bin/python -m gunicorn FasterRunner.wsgi_docker -b 0.0.0.0 -w4 -k gevent
```

就是占用资源还是有点高(刚启动的状态，184M)

![image-20230420095940802](https://img.huacai.one/image-20230420095940802.webp)



如果换成gunicorn worker pool换成协程之后，只有1个worker，那会有问题吗？  
:::info{title="亲自来验证一波吧"}
https://fast.huacai.one/fastrunner/login  
账号: `test`  
密码: `test2020`
:::

```shell
# 容器中django启动命令，使用gunicorn + gevent worker pool（异步)
# -w1，启动1个worker
/usr/local/bin/python -m gunicorn FasterRunner.wsgi_docker -b 0.0.0.0 -w1 -k gevent
```

占用资源少了一半，对于内存不足的小鸡，90M也很香呀！

![image-20230420095156709](https://img.huacai.one/image-20230420095156709.webp)



# 6、总结

- 出问题先从最近的改动开始排查，先回滚再说