当前位置：首页 > news >正文

部署和运维

news 文章来源：https://blog.csdn.net/qq_43389779/article/details/140514868 2024/11/19 22:45:55

1.Git
- 1.1. Git指令中merge和rebase的区别
- - 1. Commit 记录
  - 2. 合并方式
  - 3. 冲突处理
  - 4. 使用场景
  - 选择建议
- 1.2. cherry-pick的使用
- - 如何使用 `git cherry-pick`
  - - 例子
    - 处理冲突
    - 撤销 `cherry-pick`
    - 其他选项
  - 结论
2. 部署
- 1. Nginx的使用场景
编译打包
- 1. webpack
- 2. webpack打包优化
- - 1. 代码分割（Code Splitting）
  - 2. 模块合并（Concatenation）
  - 3. 模块缓存（Module Caching）
  - 4. 依赖分析（Dependency Analysis）
  - 5. 树摇动（Tree Shaking）
  - 6. 压缩（Compression）
  - 7. 提取公共代码（Commons Chunking）
  - 8. 静态资源处理（Static Assets Handling）
  - 9. 使用生产模式（Production Mode）
  - 10. 外部化（Externals）
  - 11. 懒加载（Lazy Loading）
  - 12. 并发构建（Concurrent Building）
  - 13. 插件系统（Plugin System）
- 3. vite
- 4. vite打包优化
- - 1. 快速开发服务器
  - 2. 热模块替换 (HMR)
  - 3. 生产构建
  - 4. 静态资源处理
  - 5. 自动导入
  - 6. 模块预构建
  - 7. 插件系统
  - 8. 生产模式配置
  - 9. 懒加载和动态导入
  - 10. 外部化和CDN集成
- 5. webpack和vite对比
- - 启动速度
  - 打包方式
  - 热更新
  - 生态系统
  - 实践经验
  - 代码优化
  - 技术栈兼容性
  - 总结

1.Git

1.1. Git指令中merge和rebase的区别

在Git中，git merge 和 git rebase 都是用来整合两个分支历史的方法，但它们在操作上和效果上有显著的不同。下面是两者的主要区别：

1. Commit 记录

git merge 会在目标分支的历史上添加一个新的合并提交，这个提交包含了两个分支差异的合并结果。这会留下一个明确的合并点，使得分支的历史保持分离，容易追踪。
git rebase 则会尝试“重播”一系列提交，将当前分支的提交历史“移动”到目标分支的最新提交之上。这意味着当前分支的提交看起来像是从目标分支的最新状态开始的一样。这样做并不会保留原始的提交历史，而是会创建新的提交。

2. 合并方式

git merge 通过创建一个新提交来合并两个分支，这个提交包含了两个分支的差异。这可以直观地看到两个分支的合并情况。
git rebase 则是通过调整当前分支的提交历史，将它们置于目标分支的最新状态之上，就像这些提交从未离开过目标分支一样。

3. 冲突处理

git merge 解决冲突后会留下一个额外的合并提交，这个提交记录了冲突解决的过程。
git rebase 在解决冲突后不会产生额外的提交，而是直接修改或替换相关的提交。这使得提交历史显得更“干净”。

4. 使用场景

git merge 适用于希望保留分支历史的场景，比如在团队协作中，每个功能分支的提交历史都是有价值的，应当被保留。
git rebase 更适用于清理提交历史，比如在开发一个功能分支时，希望它的提交历史看起来好像一直跟随着主分支，或者在提交前希望整理提交历史使其更加清晰。

选择建议

当你关心线性的历史记录，希望提交历史简洁并且避免不必要的合并提交时，使用 git rebase。
当你需要保留分支历史的完整性，特别是当分支已经被推送到共享仓库，其他人正在基于这个分支工作时，使用 git merge。

在决定使用哪种方法时，应考虑到团队的协作方式和项目的需求。在共享的仓库中使用 git rebase 需要特别小心，因为它会重写历史，如果其他人的工作已经基于这个历史，可能会引起问题。

1.2. cherry-pick的使用

git cherry-pick 命令允许你从一个分支挑选一个或多个特定的提交，并将这些提交应用到你当前所在的分支。这在很多场景下都非常有用，比如：

当你需要将一个或多个特定的修复或特性从一个分支移植到另一个分支时。
当你想要合并远程分支的一个提交，而不合并整个分支。
当你希望在不同的仓库间移植代码更改时。

如何使用 `git cherry-pick`

基本语法是：

git cherry-pick <commit-hash>

这里的 <commit-hash> 是你要应用的提交的哈希值，你可以在 git log 输出中找到它。

例子

假设你有两个分支，一个是 main，另一个是 feature，并且 feature 分支上有一些提交你想要移到 main 分支上。你可以切换到 main 分支，然后使用 cherry-pick 命令：

git checkout main
git cherry-pick feature_commit_hash

如果 feature_commit_hash 是你从 git log 中获得的特定提交的哈希值，那么这条命令就会将那个提交应用到 main 分支上。

处理冲突

如果 cherry-pick 的过程中遇到冲突，Git 会停下来让你手动解决冲突。一旦你解决了冲突，你可以继续应用剩下的变更：

git cherry-pick --continue

如果你想跳过当前冲突并继续下一个，可以使用：

git cherry-pick --skip

撤销 `cherry-pick`

如果 cherry-pick 后发现你并不想保留这个提交，你可以使用 git reset 来撤销：

git reset --hard HEAD~

这会将当前分支的状态回滚到上一个提交。

其他选项

-n 或 --no-commit：这会阻止 Git 自动提交结果，而是要求你手动提交。
-m 或 --mainline：当 cherry-picking 一个合并提交时，你可以指定要应用的父提交。
-x 或 --strategy=recursive：这会使用递归策略来合并，通常用于解决复杂的合并冲突。

结论

git cherry-pick 是一个非常灵活和强大的命令，它可以让你在Git中精确地控制哪些提交被应用到哪个分支，从而帮助你更精细地管理代码历史。

2. 部署

1. Nginx的使用场景

Nginx 是一款高性能的Web服务器和反向代理服务器，因其高并发能力、稳定性、资源消耗低和丰富的功能集，被广泛应用于多种场景中。以下是 Nginx 的一些主要使用场景：

静态文件服务：
Nginx 特别擅长处理静态文件请求，如 HTML 页面、图像、CSS 和 JavaScript 文件。它能够快速响应大量静态文件请求，减轻动态服务器的负担。
反向代理和负载均衡：
Nginx 可以作为反向代理服务器，将请求分发到后端的多个服务器上，实现负载均衡，提高系统的可用性和响应速度。这对于处理高流量的网站和应用至关重要。
缓存服务：
Nginx 支持页面缓存和代理缓存，可以缓存后端服务器的响应，减少对后端服务器的请求，提高数据访问速度和系统性能。
SSL/TLS 加速：
Nginx 支持 HTTPS 连接，可以处理 SSL/TLS 加密，减轻后端服务器的 SSL 处理负担，同时确保数据传输的安全性。
WebSocket 支持：
Nginx 支持 WebSocket 协议，可以用于实时通信应用程序，如在线聊天、实时数据更新等场景。
API 网关：
Nginx 可以作为 RESTful API 的网关，实现路由、协议转换、数据格式转换和请求限制等功能。
正向代理：
Nginx 可以作为正向代理，允许客户端通过 Nginx 访问互联网，常用于企业防火墙或代理服务器。
限流系统：
Nginx 提供模块来限制连接数或请求速率，保护后端服务器免受 DDoS 攻击或资源耗尽。
URL 重写和重定向：
Nginx 可以实现 URL 重写规则，用于 SEO 优化、迁移旧网站链接或简化 URL。
虚拟主机：
Nginx 支持在同一服务器上配置多个虚拟主机，每个虚拟主机可以有不同的域名和内容，便于托管多个网站。
日志管理和分析：
Nginx 提供详细的访问日志，可以用于监控、故障排查和数据分析。
邮件代理服务器：
Nginx 可以作为邮件代理服务器，处理 SMTP、POP3 和 IMAP 协议，用于邮件传输和过滤。

Nginx 的灵活性和模块化设计使得它能够适应各种不同的需求和环境，成为现代 Web 架构中的核心组件之一。

编译打包

1. webpack

Webpack是一个流行的模块打包器（module bundler），主要用于前端开发，它的主要功能是将应用程序中使用的各种模块和资源打包成一个或多个优化过的静态文件，以便在浏览器中运行。Webpack的设计理念是将项目中的所有资源（不仅仅是JavaScript，还包括CSS、图像、字体等）视为模块，这样可以统一管理和处理这些资源。

以下是Webpack的一些关键特性和概念：

入口起点（Entry Points）：
Webpack需要知道从哪里开始打包，这就是入口起点。你可以在配置文件中指定一个或多个入口点，Webpack会从这里开始查找和打包模块。
输出（Output）：
这是Webpack打包后生成的文件的配置，包括输出目录和输出文件名等。
加载器（Loaders）：
Webpack使用加载器来转换各种类型的资源，使之成为模块。例如，babel-loader用于将ES6+代码转译为浏览器可识别的ES5代码，url-loader用于处理图像和字体文件。
插件（Plugins）：
插件可以扩展Webpack的功能，执行更复杂的任务，如代码分割、优化、资源压缩、热模块替换（Hot Module Replacement, HMR）等。
模块解析（Resolution）：
Webpack可以自动解析模块路径，查找并引入所需的模块。
代码拆分（Code Splitting）：
Webpack支持动态导入和懒加载，可以将代码拆分成多个包，只有在需要时才加载，这有助于优化应用的加载速度。
优化（Optimization）：
Webpack提供了多种优化选项，包括压缩代码、提取公共模块、缓存和长期缓存策略等。
配置文件（Configuration File）：
Webpack使用一个名为webpack.config.js的配置文件来指定打包的规则和选项。这个文件可以非常简单，也可以非常复杂，取决于项目的需求。
开发服务器（Dev Server）：
Webpack Dev Server提供了本地开发环境，支持实时重载和热模块替换，加速了开发过程。

Webpack的生态系统非常丰富，有大量的社区贡献的加载器和插件，可以满足各种不同的需求。由于其高度的灵活性和强大的功能，Webpack成为了构建现代Web应用的标准工具之一。

如果你正在考虑使用Webpack，你需要通过npm或yarn将其安装到你的项目中，然后设置相应的配置文件。Webpack的官方网站和社区文档提供了详细的教程和指南，帮助你快速上手。

2. webpack打包优化

Webpack 的打包优化主要包括以下几个方面：

1. 代码分割（Code Splitting）

Webpack 支持动态导入 (import()) 和代码分割，这可以让你将代码分为多个较小的包，而不是一个巨大的单一包。代码分割可以基于路由、异步加载、函数调用等进行，这样用户只会加载他们实际需要的代码，减少了初次加载时间。

2. 模块合并（Concatenation）

Webpack 可以将多个模块合并到一个文件中，减少 HTTP 请求的数量，从而提高加载速度。

3. 模块缓存（Module Caching）

Webpack 在构建过程中会缓存模块的解析结果，这样在下次构建时，如果文件没有变化，就可以直接使用缓存，节省构建时间。

4. 依赖分析（Dependency Analysis）

Webpack 会递归地构建一个依赖关系图，找出哪些模块是真正需要的，以及它们之间的依赖关系，从而剔除未使用的代码，进行树摇动（Tree Shaking）。

5. 树摇动（Tree Shaking）

Webpack 支持 ES6 模块语法，这意味着它可以识别无副作用的代码和未使用的导出，并在打包时移除这些代码，减少最终输出文件的大小。

6. 压缩（Compression）

Webpack 可以使用插件如 TerserPlugin 或 UglifyJsPlugin 来压缩 JavaScript 代码，或者 MiniCssExtractPlugin 和 optimize-css-assets-webpack-plugin 来处理和压缩 CSS。

7. 提取公共代码（Commons Chunking）

Webpack 可以提取出多个入口点之间共用的代码，将其打包到一个单独的文件中，这可以提高缓存利用率和加载速度。

8. 静态资源处理（Static Assets Handling）

Webpack 可以通过加载器处理各种静态资源，如图片、字体等，将其转换为模块并进行优化，例如使用 url-loader 或 file-loader。

9. 使用生产模式（Production Mode）

在 Webpack 配置中设置 mode 为 production，这会启用一系列默认的优化，包括但不限于压缩代码、优化输出文件名等。

10. 外部化（Externals）

Webpack 允许你声明某些模块作为外部依赖，这样就不会被包含在打包的文件中，而是假定在运行时环境中可用，这可以进一步减小打包后的文件大小。

11. 懒加载（Lazy Loading）

Webpack 支持按需加载，允许你延迟加载不立即需要的代码，直到用户与特定功能交互时才加载。

12. 并发构建（Concurrent Building）

Webpack 支持多核 CPU，并可以使用 thread-loader 等插件来并行执行任务，加快构建速度。

13. 插件系统（Plugin System）

Webpack 的插件系统极其强大，允许开发者在构建过程的各个阶段插入自定义逻辑，执行各种优化和处理任务。

通过上述方法，Webpack 能够显著提高打包的效率和最终输出的性能，使你的应用更加轻量级和快速。

3. vite

Vite（发音为“veet”，意大利语中意为“快速”）是一个现代的前端构建工具，专为开发基于ES模块的应用程序设计。Vite由Vue.js的核心开发者Evan You创建，但它的使用并不局限于Vue项目，同样适用于React、Preact以及其他基于JavaScript的前端框架或库。

Vite的主要特点和优势包括：

快速启动：
Vite利用了现代浏览器对ES模块的原生支持，这意味着在开发环境中，Vite不需要等待整个应用被打包成单个文件才能启动。相反，它直接通过HTTP服务提供模块，从而实现了近乎即时的启动速度。
热模块替换（HMR）：
Vite提供了高效且细粒度的热模块替换，当源代码发生变化时，它仅重新编译受影响的部分，并将更改推送到浏览器中，而无需完全刷新页面，这大大提高了开发效率。
开箱即用的配置：
Vite提供了默认的构建配置，对于大多数项目来说，开发者几乎不需要修改任何配置即可开始工作，这使得新项目启动变得非常简单快捷。
高度可扩展性：
尽管Vite有开箱即用的配置，但它仍然允许开发者通过插件API和JavaScript API来定制构建流程，以适应特定项目的需求。
生产构建优化：
在生产环境中，Vite使用Rollup进行构建，这包括代码分割、压缩、树摇动（tree shaking）等优化措施，确保最终的构建产物体积小、加载速度快。
TypeScript支持：
Vite内置了对TypeScript的支持，使得在大型项目中使用类型安全变得更加容易。
社区和生态：
Vite有一个活跃的社区，不断有新的插件和集成被开发出来，这进一步增强了它的功能和适用范围。
对现代标准的支持：
Vite遵循最新的ECMAScript标准，支持ES Modules，这让它在处理现代JavaScript语法和模块化结构时更加得心应手。

Vite的使用通常涉及到以下步骤：

通过npm或yarn全局安装Vite CLI。
初始化一个新的Vite项目或在现有项目中配置Vite。
运行开发服务器进行开发。
执行构建脚本为生产环境准备优化后的代码。

Vite的出现是对传统构建工具如Webpack的挑战，它试图解决一些常见的痛点，如构建速度慢、配置复杂等问题，同时保持高度的灵活性和强大的功能集。

4. vite打包优化

Vite 在打包优化方面采用了与传统构建工具如 Webpack 不同的策略，它充分利用了现代浏览器对 ES 模块的支持，以及高效的开发和构建流程。以下是 Vite 进行打包优化的主要方式：

1. 快速开发服务器

Vite 的开发服务器在启动时几乎瞬间完成，因为它不等待整个项目打包完成。它通过 HTTP 服务器直接提供模块，利用浏览器的 ES 模块加载机制，这极大地提高了开发效率。

2. 热模块替换 (HMR)

Vite 实现了高效且细粒度的热模块替换 (HMR)，这意味着当源代码发生改变时，只有受影响的部分会被重新编译和替换，而无需重新加载整个页面。这使得开发者可以即时看到更改效果，提高了迭代速度。

3. 生产构建

对于生产环境，Vite 使用 Rollup 来进行构建，这包括：

代码分割：通过动态导入 (import()) 实现按需加载和代码分割，减少初始加载时间。
压缩和优化：使用 Terser 等工具压缩 JavaScript，使用 CSS 压缩插件优化样式表，去除无用的代码（树摇动）。
公共代码提取：将共享的代码片段提取到单独的包中，利用浏览器缓存。

4. 静态资源处理

Vite 支持静态资源的优化，包括图片、字体等的压缩和尺寸调整，通过插件如 vite-plugin-imagemin 实现。

5. 自动导入

Vite 支持自动导入常用库和组件，例如通过 unplugin-vue-components 和 unplugin-auto-import 插件，这减少了冗余代码，优化了包的大小。

6. 模块预构建

Vite 可以预构建和缓存模块，这意味着在再次构建时，可以跳过已经处理过的模块，加快构建速度。

7. 插件系统

Vite 的插件系统允许开发者扩展和定制构建过程，例如使用 rollup-plugin-visualizer 来可视化构建结果，帮助识别优化点。

8. 生产模式配置

在生产环境下，Vite 会自动开启压缩和优化，可以通过 vite.config.js 中的 build 配置项进一步定制优化策略。

9. 懒加载和动态导入

Vite 支持动态导入语法，可以实现懒加载和更精细的代码分割，只在需要时加载代码，减少不必要的资源消耗。

10. 外部化和CDN集成

Vite 可以将某些库标记为外部依赖，利用 CDN 提供的资源，减少打包体积，同时利用 CDN 的缓存和分发优势。

Vite 的打包优化策略旨在提供快速的开发体验和高效的生产构建，通过利用现代浏览器特性、高效模块加载和先进的构建技术，它能够显著提升前端项目的开发和部署效率。

5. webpack和vite对比

Webpack 和 Vite 是两种流行的前端构建工具，它们各有特色，适用于不同的场景和需求。以下是两者之间的一些关键对比：

启动速度

Vite 利用浏览器的ES模块原生支持，不需要等待整个项目打包完毕就能启动开发服务器，因此启动速度非常快。
Webpack 在启动时需要构建整个项目，分析模块依赖，打包模块，这通常需要更多时间。

打包方式

Vite 在开发模式下按需加载模块，直接通过HTTP服务提供模块，不需要预先打包。在生产构建时使用Rollup进行代码分割、压缩等优化。
Webpack 在启动时会进行全面的模块分析和打包，生成静态资源，无论是开发还是生产模式都需要完整的构建流程。

热更新

Vite 的热模块替换（HMR）效率高，仅重新请求和编译改变的模块，无需重新编译整个依赖树。
Webpack 的HMR也需要重新编译依赖的模块，尽管有缓存机制，但在复杂项目中可能不如Vite迅速。

生态系统

Webpack 拥有成熟的生态系统，包括大量的loader和plugin，支持各种资源类型和复杂的构建需求。
Vite 的生态系统相对较新，虽然也在快速发展，但可能在某些边缘情况下缺乏成熟解决方案。

实践经验

Webpack 有着广泛的使用案例和丰富的实践经验，遇到问题时更容易找到解决方案。
Vite 作为一个较新的工具，可能在某些不常见的场景下遇到未预见的问题，社区支持和文档可能还在建设中。

代码优化

Vite 在生产构建中使用Rollup进行优化，支持代码分割、压缩、树摇动等。
Webpack 在代码优化方面也非常强大，提供了丰富的插件来处理各种优化需求。

技术栈兼容性

Vite 默认支持ES模块，对现代JavaScript语法有良好的支持，适合构建基于ESM的应用。
Webpack 支持各种模块格式（CommonJS、AMD、ESM等），适用于更广泛的项目。

总结

选择Webpack还是Vite主要取决于项目需求和个人偏好。如果你重视开发效率和快速启动，Vite可能是更好的选择。然而，如果你的项目有复杂的构建需求或需要高度定制化的配置，Webpack可能会更加合适。在实践中，许多团队也会结合使用两者的优势，例如在开发环境中使用Vite，在生产环境中使用Webpack进行构建，以达到最佳的开发和部署效果。

目录