作为程序员,我们不能只管上线,不管线上!( 二 )


只能说太粗心了
server {listen80 default_server;listen[::]:80 default_server;server_namexxx.com www.xxx.com;root/usr/share/nginx/html;return 301 https://$server_name$request_uri;}server {listen443 ssl http2 default_server;listen[::]:443 ssl http2 default_server;server_namexxx.com www.xxx.com;root/usr/share/nginx/html;ssl_certificate "xxx.crt";ssl_certificate_key "xxx.key";ssl_session_cache shared:SSL:1m;ssl_session_timeout10m;ssl_ciphers PROFILE=SYSTEM;ssl_prefer_server_ciphers on;location / {proxy_pass http://backend$request_uri;proxy_set_headerHost $host:$server_port;proxy_set_headerX-Real-IP$remote_addr;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "Upgrade";client_max_body_size10m;# 实现前端打字效果proxy_buffering off;}error_page 404 /404.html;location = /40x.html {}error_page 500 502 503 504 /50x.html;location = /50x.html {}}页面加载时间优化另外在使用的时候还发现,有的时候网页或者手机打开网站需要好几秒才能把整个页面渲染出来,自己用起来都很不爽更别说什么用户体验了 。
通过浏览器的 .NETwork 栏目,发现网站在加载的时候会联网访问一个 css 文件,这个 css 文件里面会用到很多字体文件,而且这些字体文件也是从网络实时下载的 。
看了下 Issue 发现也有其他人遇到了这个问题,这个更夸张直接加载了 42 秒 。
作为程序员,我们不能只管上线,不管线上!

文章插图
图片
通过将这个问题提交下载下来,然后直接访问,不再从网络上下载 。手动将这个 css 文件下载下来过后,发现里面还引用的很多字体文件,如下所示,总共 388 个,这样是手动一个个下载那不是要了老命 。
作为程序员,我们不能只管上线,不管线上!

文章插图
图片
所以需要通过脚本来进行下载,通过询问 ChatGPT 让它帮我们写一个 go 语言脚本来执行这个逻辑 。
作为程序员,我们不能只管上线,不管线上!

文章插图
图片
完整的代码如下所示
package mAInimport ( "bufio" "fmt" "net/http" "os" "regexp" "strings")func main() { const cssPath = "css2.css" const fontDir = "fonts" const urlPrefix = "https:" // 读取 CSS 文件 cssFile, err := os.Open(cssPath) if err != nil {panic(fmt.Sprintf("Failed to open %s: %s", cssPath, err)) } defer cssFile.Close() // 创建字体存储目录 if err := os.MkdirAll(fontDir, 0755); err != nil {panic(fmt.Sprintf("Failed to create font directory: %s", err)) } // 解析 CSS 文件 scanner := bufio.NewScanner(cssFile) for scanner.Scan() {line := scanner.Text()if strings.Contains(line, "url(") && strings.Contains(line, ".woff2") {// 使用正则表达式提取 WOFF2 文件 URLre := regexp.MustCompile(`url(["']?([^"']+.(woff2))`)matches := re.FindStringSubmatch(line)if len(matches) >= 2 {fontUrl := matches[1]if strings.HasPrefix(fontUrl, "//") {fontUrl = urlPrefix + fontUrl}// 下载 WOFF2 文件fmt.Printf("Downloading %s...n", fontUrl)res, err := http.Get(fontUrl)if err != nil {fmt.Printf("Failed to download %s: %sn", fontUrl, err)continue}defer res.Body.Close()// 创建字体文件fontPath := fmt.Sprintf("%s/%s", fontDir, matches2)fontFile, err := os.Create(fontPath)if err != nil {fmt.Printf("Failed to create font file %s: %sn", fontPath, err)continue}defer fontFile.Close()// 写入字体文件_, err = fontFile.ReadFrom(res.Body)if err != nil {fmt.Printf("Failed to write to font file %s: %sn", fontPath, err)} else {fmt.Printf("Font file %s downloaded.n", fontPath)}}} }}ChatGPT 不仅给出了代码,还给出了解释
此脚本遵循以下步骤:
  1. 打开 CSS 文件
  2. 逐行读取文件内容
  3. 对每一行使用正则表达式进行匹配,查找字体文件链接
  4. 使用 http.Get() 发送 HTTP 请求下载字体文件
  5. 创建本地文件,并将字体数据写入该文件

作为程序员,我们不能只管上线,不管线上!

文章插图
图片
上面代码通过 go run download.go 直接运行脚本发现是可以正常运行的,但是一开始是有个问题的那就是没有考虑到多个文件会覆盖,我们简单修改几行就可以正常使用了 。
index := strings.LastIndex(matches[1], "/")filename := matches[1][index+1:]// 创建字体文件fontPath := fmt.Sprintf("%s/%s", fontDir, filename)


推荐阅读