feat: 新增文章-浏览器缓存 &&CICD

docs/.vitepress/config.mts

@@ -23,8 +23,8 @@ export default defineConfig({
     nav: [
       { text: "Home", link: "/" },
       { text: "Front-end", link: "/front/engi/rule", activeMatch: "/front/" },
-      { text: "Back-end", link: "/back/framework/nest", activeMatch: "/back/" },
-      { text: "Others", link: "/others/operation/md", activeMatch: "/others/" },
+      { text: "Back-end", link: "/back/framework/chooseFrameWork", activeMatch: "/back/" },
+      { text: "Others", link: "/others/operation/git", activeMatch: "/others/" },
     ],
     search: {
       provider: "local",

docs/.vitepress/utils.ts

@@ -20,10 +20,19 @@ export default {
                 text: "前端常见性能优化方案",
                 link: "/front/base/performance/",
               },
+              {
+                text:"前端资源部署策略",
+                link:"/front/engi/deploy/"
+              },
+
               {
                 text: "微前端架构浅析",
                 link: "/front/engi/microFront/",
               },
+              {
+                text:"前端视角看CICD",
+                link:"/front/engi/CICD/"
+              },
 
             ],
           },
@@ -38,6 +47,10 @@ export default {
                 text:"从前端视角看AI世界",
                 link:"/front/base/Ai/"
               },
+              {
+                text: "vue2响应式原理",
+                link: "/front/source/vue2/reactive/",
+              },
               {
                 text: "10分钟搭建一个属于自己的博客",
                 link: "/front/practice/blog/",
@@ -65,16 +78,8 @@ export default {
                 link: "/front/mini/trap/",
               },
             ],
-          },
-          {
-            text:"源码分析",
-            items: [
-              {
-                text: "vue2响应式原理",
-                link: "/front/source/vue2/reactive/",
-              },
-            ],
-          },
+          }
+
         ],
       },
       {
@@ -149,7 +154,7 @@ export default {
                 link:"/others/maintain/jenkins/"
               },
               {
-                text: "关于浏览器缓存那些事",
+                text: "浅析浏览器缓存",
                 link: "/others/maintain/cache/",
               },
             ],

docs/front/base/performance/index.md

@@ -1,9 +1,15 @@
 # 前端常见性能优化方案
 
+前端性能优化是提升用户体验的关键环节。本文将从多个维度详细探讨前端性能优化的方案，以及如何排查和解决常见的性能问题。
+
 ## 网络
 
 ## 包体积
 
 ## 页面渲染
 
-## 其它
+### 懒加载
+
+### 预加载
+
+### SSR（服务端渲染）

docs/front/engi/CICD/index.md

@@ -0,0 +1,218 @@
+# 前端视角看CICD
+
+## 什么是CI/CD？
+
+CI/CD（持续集成/持续交付）是现代软件开发中的重要实践，它通过自动化的流程来提高软件交付的效率和质量。
+
+- **CI（持续集成）**：开发人员频繁地将代码集成到主干分支，每次集成都通过自动化构建和测试来验证，从而尽早发现问题。
+- **CD（持续交付/部署）**：将软件自动化地部署到各种环境中（测试环境、预发环境、生产环境等）。
+
+## CI/CD的优势
+
+1. **提高开发效率**
+   - 自动化构建和部署，减少人工操作
+   - 快速发现并解决问题
+   - 减少重复性工作
+
+2. **保证代码质量**
+   - 自动化测试确保代码质量
+   - 统一的构建流程
+   - 代码规范检查
+
+3. **降低部署风险**
+   - 环境一致性
+   - 可回滚机制
+   - 分步骤部署
+
+## 核心工具介绍
+
+### Jenkins
+
+Jenkins是最流行的CI/CD工具之一，具有以下特点：
+
+1. **强大的插件生态**
+   - 支持各种构建工具
+   - 丰富的集成能力
+   - 自定义扩展性强
+
+2. **Pipeline即代码**
+   - 使用Jenkinsfile描述整个流水线
+   - 版本控制
+   - 可复用性高
+
+3. **分布式构建**
+   - Master-Slave架构
+   - 负载均衡
+   - 跨平台支持
+
+[更多内容](https://doggyegg.github.io/charlie-blog/others/maintain/jenkins/)
+
+### Docker
+
+Docker是容器化技术的代表，在CI/CD中发挥着重要作用：
+
+1. **环境隔离**
+   - 应用程序及其依赖打包
+   - 确保开发和生产环境一致
+   - 快速部署和扩展
+
+2. **镜像管理**
+   - 版本控制
+   - 快速回滚
+   - 镜像复用
+
+3. **资源优化**
+   - 轻量级虚拟化
+   - 快速启动
+   - 资源利用率高
+
+[更多内容](https://doggyegg.github.io/charlie-blog/others/maintain/docker/)
+
+### Nginx
+
+Nginx作为高性能的Web服务器，在前端部署中具有重要作用：
+
+1. **反向代理**
+   - 负载均衡
+   - 安全防护
+   - 缓存加速
+
+2. **静态资源服务**
+   - 高效的静态文件服务
+   - Gzip压缩
+   - 缓存控制
+
+[更多内容](https://doggyegg.github.io/charlie-blog/others/maintain/ng/)
+
+## 实战案例：Vue2项目的CI/CD部署
+
+### 1. Jenkins Pipeline配置
+
+```groovy
+pipeline {
+    agent any
+    
+    environment {
+        DOCKER_IMAGE = 'vue-app'
+        DOCKER_TAG = "${BUILD_NUMBER}"
+    }
+    
+    stages {
+        stage('Checkout') {
+            steps {
+                checkout scm
+            }
+        }
+        
+        stage('Install Dependencies') {
+            steps {
+                sh 'npm install'
+            }
+        }
+        
+        stage('Build') {
+            steps {
+                sh 'npm run build'
+            }
+        }
+        
+        stage('Docker Build') {
+            steps {
+                script {
+                    docker.build("${DOCKER_IMAGE}:${DOCKER_TAG}")
+                }
+            }
+        }
+        
+        stage('Deploy') {
+            steps {
+                sh """
+                    docker stop ${DOCKER_IMAGE} || true
+                    docker rm ${DOCKER_IMAGE} || true
+                    docker run -d --name ${DOCKER_IMAGE} -p 8080:80 ${DOCKER_IMAGE}:${DOCKER_TAG}
+                """
+            }
+        }
+    }
+}
+```
+
+### 2. Dockerfile配置
+
+```dockerfile
+# 构建阶段
+FROM node:14 as builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# 生产阶段
+FROM nginx:alpine
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
+```
+
+### 3. Nginx配置
+
+```nginx
+server {
+    listen 80;
+    server_name localhost;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # API代理配置
+    location /api {
+        proxy_pass http://backend-service;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+
+    # 静态资源缓存配置
+    location /static/ {
+        expires 7d;
+        add_header Cache-Control "public, no-transform";
+    }
+}
+```
+
+## 部署流程说明
+
+1. **代码提交触发Jenkins构建**
+   - 开发人员提交代码到Git仓库
+   - Webhook触发Jenkins构建任务
+   - Jenkins拉取最新代码
+
+2. **Jenkins执行构建流程**
+   - 安装项目依赖
+   - 执行代码检查和测试
+   - 构建生产环境代码
+
+3. **Docker镜像构建**
+   - 基于Dockerfile构建应用镜像
+   - 多阶段构建优化镜像大小
+   - 推送镜像到镜像仓库
+
+4. **部署和服务配置**
+   - 拉取Docker镜像
+   - 启动容器
+   - Nginx配置生效
+
+## 总结
+
+通过CI/CD的实践，我们可以：
+- 实现自动化的构建和部署流程
+- 提高开发团队的效率
+- 保证部署的稳定性和可靠性
+- 快速响应业务需求变化
+
+建议在实际项目中根据具体需求调整配置，并持续优化部署流程。