From 3785b1aefd28650da5cebe7908db7baa05ab3989 Mon Sep 17 00:00:00 2001 From: clh Date: Fri, 24 Jan 2025 14:45:20 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=96=87=E7=AB=A0-?= =?UTF-8?q?=E6=B5=8F=E8=A7=88=E5=99=A8=E7=BC=93=E5=AD=98=20&&CICD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vitepress/config.mts | 4 +- docs/.vitepress/utils.ts | 27 ++-- docs/front/base/performance/index.md | 8 +- docs/front/engi/CICD/index.md | 218 +++++++++++++++++++++++++++ docs/front/engi/deploy/index.md | 140 +++++++++++++++++ docs/front/practice/blog/index.md | 4 +- docs/index.md | 4 +- docs/others/maintain/cache/index.md | 125 ++++++++++++++- 8 files changed, 510 insertions(+), 20 deletions(-) create mode 100644 docs/front/engi/CICD/index.md create mode 100644 docs/front/engi/deploy/index.md diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index 158e02c..2ab6f26 100644 --- a/docs/.vitepress/config.mts +++ b/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", diff --git a/docs/.vitepress/utils.ts b/docs/.vitepress/utils.ts index 8263043..e126775 100644 --- a/docs/.vitepress/utils.ts +++ b/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/", }, ], diff --git a/docs/front/base/performance/index.md b/docs/front/base/performance/index.md index 9fe6446..dfcefeb 100644 --- a/docs/front/base/performance/index.md +++ b/docs/front/base/performance/index.md @@ -1,9 +1,15 @@ # 前端常见性能优化方案 +前端性能优化是提升用户体验的关键环节。本文将从多个维度详细探讨前端性能优化的方案，以及如何排查和解决常见的性能问题。 + ## 网络 ## 包体积 ## 页面渲染 -## 其它 +### 懒加载 + +### 预加载 + +### SSR（服务端渲染） \ No newline at end of file diff --git a/docs/front/engi/CICD/index.md b/docs/front/engi/CICD/index.md new file mode 100644 index 0000000..128aa03 --- /dev/null +++ b/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的实践，我们可以： +- 实现自动化的构建和部署流程 +- 提高开发团队的效率 +- 保证部署的稳定性和可靠性 +- 快速响应业务需求变化 + +建议在实际项目中根据具体需求调整配置，并持续优化部署流程。 diff --git a/docs/front/engi/deploy/index.md b/docs/front/engi/deploy/index.md new file mode 100644 index 0000000..26b440b --- /dev/null +++ b/docs/front/engi/deploy/index.md @@ -0,0 +1,140 @@ +# 前端资源部署策略详解 + +在现代前端开发中，资源部署是一个看似简单但实际上需要仔细考虑的重要环节。一个优秀的部署策略不仅能确保用户访问到最新的资源，还能保证在部署过程中用户的正常使用。本文将深入探讨前端资源部署的各个方面。 + +## 前端部署资源类型 + +在进行前端部署时，我们需要考虑以下几类资源： + +1. **HTML文件** + - index.html（入口文件） + - 其他HTML模板文件 + +2. **静态资源** + - JavaScript文件（.js） + - CSS样式文件（.css） + - 图片资源（.jpg, .png, .svg等） + - 字体文件（.ttf, .woff等） + - 其他媒体文件 + +3. **配置文件** + - 环境配置文件 + - CDN配置 + - 路由配置 + +## 部署顺序的考量 + +关于是先部署index.html还是先部署静态资源，这个问题的答案是：**应该先部署静态资源，后部署HTML文件**。原因如下： + +1. **缓存机制** + - 静态资源通常会带有hash值（如`main.a7b8c9.js`） + - 新的静态资源和旧的可以共存，不会发生冲突 + +2. **避免白屏** + - 如果先部署HTML，新HTML可能引用还未部署的新静态资源 + - 这种情况会导致资源404，用户看到白屏 + +3. **回滚友好** + - 静态资源先部署便于发现问题 + - 如果静态资源有问题，可以快速回滚HTML文件 + +## 确保用户获取最新资源 + +要确保用户能获取到最新的资源，可以采取以下策略： + +1. **文件名Hash策略** + ```html + + + + + ``` + +2. **缓存机制-Cache-Control设置** + - HTML文件：`Cache-Control: no-store` + - 静态资源：`Cache-Control: max-age=31536000` + + 更多关于浏览器缓存的知识可参考博客中 [《浅析浏览器缓存》](https://doggyegg.github.io/charlie-blog/others/maintain/cache/) + +3. **版本号控制** + - 在HTML中注入版本号 + - 通过接口检测版本变化 + +## 处理部署期间的用户访问 + +当部署过程中有用户正在操作页面时，需要考虑以下几个方面： + +1. **资源完整性** + - 确保用户使用的是同一版本的资源集合 + - 避免新旧资源混用 + +2. **状态保持** + - 保存用户的操作状态 + - 提供平滑的过渡方案 + +3. **用户提示** + - 在检测到新版本时提示用户 + - 提供刷新或稍后更新的选择 + +## 灰度部署策略 + +### 逻辑灰度 + +逻辑灰度是在应用层面进行的灰度发布： + +1. **特征开关（Feature Flags）** + ```javascript + if (isFeatureEnabled('new-feature')) { + // 新功能代码 + } else { + // 旧功能代码 + } + ``` + +2. **用户分组** + - 按用户ID进行分组 + - 按用户特征进行分组 + - 按访问时间进行分组 + +### 物理灰度 + +物理灰度是在基础设施层面进行的灰度发布： + +1. **多集群部署** + - 蓝绿部署 + - 金丝雀发布 + +2. **流量控制** + - 通过负载均衡控制流量比例 + - 按地域或网络条件分配 + +## 最佳实践总结 + +1. **部署流程** + - 构建生成带hash的静态资源 + - 上传静态资源到CDN + - 等待CDN同步完成 + - 部署HTML文件 + +2. **监控机制** + - 部署过程监控 + - 错误日志监控 + - 性能指标监控 + - 用户体验监控 + +3. **回滚机制** + - 保留历史版本 + - 准备快速回滚方案 + - 自动化回滚脚本 + +4. **缓存策略** + - 静态资源长期缓存 + - HTML文件不缓存 + - 合理的CDN缓存配置 + +5. **安全考虑** + - HTTPS部署 + - CSP配置 + - SRI校验 + +通过以上策略的组合使用，我们可以构建一个稳定、可靠的前端资源部署系统。记住，最好的部署策略是在保证用户体验的前提下，实现安全、可靠的版本更新。 \ No newline at end of file diff --git a/docs/front/practice/blog/index.md b/docs/front/practice/blog/index.md index fd17dd1..4b1643c 100644 --- a/docs/front/practice/blog/index.md +++ b/docs/front/practice/blog/index.md @@ -58,7 +58,7 @@ features: // 功能区 - title: Others icon: src: /home/network-icon.svg - link: /others/operation/md + link: /others/operation/git details: Git operation, network engineering, and some other commonly used programming tools, skills and so on ``` @@ -95,7 +95,7 @@ export default defineConfig({ { text: "Home", link: "/" }, { text: "Front-end", link: "/front/engi/rule", activeMatch: "/front/" }, { text: "Back-end", link: "/back/index", activeMatch: "/back/" }, - { text: "Others", link: "/others/operation/md", activeMatch: "/others/" }, + { text: "Others", link: "/others", activeMatch: "/others/" }, ], // 启动本地搜索功能 diff --git a/docs/index.md b/docs/index.md index 6e01400..bd07418 100644 --- a/docs/index.md +++ b/docs/index.md @@ -22,11 +22,11 @@ features: - title: Back End icon: src: /home/back-end-icon.svg - link: /back/framework/nest + link: /back/framework/chooseFrameWork details: Back-end framework applications such as express and nest.js, as well as the operation of common data such as mysql and mongodb - title: Others icon: src: /home/network-icon.svg - link: /others/operation/md + link: /others/operation/git details: Git operation, network engineering, and some other commonly used programming tools, skills and so on --- diff --git a/docs/others/maintain/cache/index.md b/docs/others/maintain/cache/index.md index f211280..ed048de 100644 --- a/docs/others/maintain/cache/index.md +++ b/docs/others/maintain/cache/index.md @@ -1,3 +1,124 @@ -# 浏览器缓存那些事 +# 浅析浏览器缓存 -敬请期待 +## 什么是浏览器缓存？ + +浏览器缓存是指浏览器在本地磁盘对用户访问过的网页资源进行存储的一种机制。这些资源包括HTML页面、JavaScript文件、CSS样式表、图片等静态资源。当用户再次访问相同的资源时，浏览器可以直接从本地加载，而不需要重新向服务器请求。 + +## 为什么需要浏览器缓存？ + +浏览器缓存的重要性体现在以下几个方面： + +1. **提升页面加载速度**：从本地读取资源比从服务器获取要快得多 +2. **减少服务器负载**：降低了服务器的请求压力 +3. **节省网络带宽**：减少了不必要的网络传输 +4. **改善用户体验**：更快的响应速度带来更好的用户体验 + +## 浏览器缓存的分类 + +浏览器缓存主要分为三大类： + +### 1. 强缓存（Strong Cache） + +强缓存是指在缓存期间不需要请求服务器，直接使用本地缓存的一种机制。通过以下HTTP头部字段来控制： + +- **Expires**（HTTP/1.0） + - 指定资源的过期时间（GMT格式） + - 受限于客户端时间，如果客户端时间不准确会有问题 + +- **Cache-Control**（HTTP/1.1） + - 更细粒度的缓存控制 + - 常用指令： + - `max-age`：缓存的最大有效时间（秒） + - `no-cache`：强制向服务器验证,跳过强缓存 + - `no-store`：不缓存任何内容 + - `private`：仅浏览器可以缓存 + - `public`：所有中间节点都可以缓存 + +### 2. 协商缓存（Negotiation Cache） + +当强缓存失效后，浏览器会携带缓存标识向服务器发起请求，由服务器决定是否使用缓存。主要通过以下两对HTTP头部字段实现： + +- **Last-Modified/If-Modified-Since** + - `Last-Modified`：服务器响应资源的最后修改时间 + - `If-Modified-Since`：客户端再次请求时带上的上次响应的Last-Modified值 + +- **ETag/If-None-Match** + - `ETag`：服务器响应资源的唯一标识 + - `If-None-Match`：客户端再次请求时带上的上次响应的ETag值 + - 比Last-Modified更精确，但计算ETag值会消耗服务器资源 + +### 3. 启发式缓存（Heuristic Caching） + +当服务器响应中没有设置任何缓存控制头（如Cache-Control或Expires）时，浏览器会采用启发式缓存策略： + +- 如果响应中包含Last-Modified头，浏览器会根据资源的最后修改时间来估算缓存时间 +- 不同浏览器有不同的启发式缓存策略： + - Firefox：会将响应时间和当前时间之差的10%作为缓存时间 + - Chrome：通常将资源缓存很短的时间（几秒到几分钟不等） + - Safari：也有自己的启发式算法，具体策略可能随版本变化 +- 例如：在Firefox中，如果一个资源的Last-Modified标识它在10天前被修改，则启发式缓存可能会将其缓存1天 + +由于不同浏览器的启发式缓存策略不同且可能随版本更新而变化，为了确保一致的缓存行为，强烈建议始终明确设置缓存控制头。 + +## 缓存流程 + +1. **强缓存流程**： + - 浏览器首次请求资源，服务器返回资源，并在响应头中设置缓存控制字段 + - 在缓存有效期内，浏览器直接使用本地缓存，不会发送请求到服务器 + - 状态码显示为200（from disk cache或from memory cache） + +2. **协商缓存流程**： + - 强缓存失效后，浏览器携带缓存标识发起请求 + - 服务器根据缓存标识判断资源是否变化 + - 如果资源未变化，返回304 Not Modified，浏览器使用本地缓存 + - 如果资源已变化，返回200和新的资源内容 + +## 缓存设置及最佳实践 + +### 1. 服务器配置示例 + +**Nginx配置示例**： +```nginx +# 静态资源缓存设置 +location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { + expires 7d; # 设置过期时间为7天 + add_header Cache-Control "public, no-transform"; +} +``` + +**Node.js Express示例**： +```javascript +app.use(express.static('public', { + maxAge: '7d', // 设置静态资源缓存7天 + setHeaders: function (res, path, stat) { + res.set('Cache-Control', 'public, no-transform'); + } +})); +``` + +### 2. 最佳实践 + +1. **针对不同资源采用不同的缓存策略** + - HTML入口页面：禁用缓存(no-store)，确保每次都获取最新版本 + - CSS、JS、图片等静态资源：强缓存，设置较长过期时间，依靠入口页打包时引用资源路径变化而更新 + - API响应：根据数据实时性要求设置适当的缓存策略 + +2. **使用版本号或哈希** + - 为静态资源文件名添加版本号或哈希值 + - 当资源内容更新时，文件名变化，自动破除缓存 + +3. **合理设置缓存时间** + - 频繁变动的资源设置短期缓存或不缓存 + - 静态资源设置长期缓存 + - 考虑用户体验和服务器负载的平衡 + +4. **使用CDN** + - 结合CDN的缓存机制 + - 配置适当的缓存控制头 + +5. **避免常见错误** + - 不要对经常变化的资源设置长期缓存 + - 记得为缓存设置合适的失效策略 + - 注意移动端的缓存特性 + +通过合理配置浏览器缓存，可以显著提升网站性能，改善用户体验。在实际应用中，需要根据具体场景和需求，选择合适的缓存策略。