DevOps在开发生命周期中扮演着不可或缺的角色。大多数前端框架都带有像Webpack这样的模块打包器来完成繁重的工作。但是，我们仍然需要规划如何连接捆绑持续集成（CI）和持续交付（CD）环境的前端工具。本文重点介绍在单页应用程序中使用DevOps的5种策略。1.减少环境配置在使用React、Angular、Vue构建单页应用的结构时，通常的操作是为每个环境使用单独的配置文件。通常，一个环境配置用于开发、生产等。如果每个环境都不同，则有多个配置文件。但是，如果在应该使用不同的捆绑配置时仅将两个配置用于开发和生产，并且其他特定于应用程序的变量（如API路径和主机名）在生成后被修改怎么办？通过保留这两个配置，您可以将本地开发配置与其余配置（生产、暂存和QA）分开。如果Build和Release分为两条pipeline，可以先放一个完整的placeholder，然后重复使用Buildpipeline来创建artifacts。稍后，根据部署环境，这些变量可以在Release管道中动态替换。这种方法有两个主要优点：可以将同一个打包器推送到多个环境中（使用基本字符串替换），从而节省宝贵的构建时间。掌握对捆绑器所做的确切更改，尤其是在特定环境中。2.设置质量门在PullRequest合并到开发分支之前构建前端是很常见的。质量门的概念与PullRequest构建相关联，您可以在其中设置额外的步骤（或门）以确保质量。例如，构建步骤可用于执行带有linter的操作，以确保修改或添加的任何代码都不会偏离已经遵循的代码风格。完成此步骤后，您可以使用SonarCloud等高级代码质量工具进行质量检查，并通过详细的洞察向PullRequest本身提供反馈。您可能会问，为什么不在签入代码之前在IDE级别完成这些代码质量评估？是的，在IDE级别（如果有可用的IDE插件）进行这些评估很重要，以避免在反馈周期上花费时间。但是，确保整体代码质量管理的质量同样重要。资料来源：unsplash3。缓存包安装npm包安装占客户端构建执行时间的很大一部分。重复构建时，很难改善这种情况，因为外部依赖项很少更改。改进后，您可以设置一个缓存步骤来缓存这些依赖项。在特定的DevOps平台（例如AzureDevOps）中，有预定义的步骤来执行此操作。但是，如果您无法在您的DevOps平台中找到它，您可以根据package.json内容创建一个哈希函数并将其用作缓存键来执行相同的操作。4.寻找并行性在某些情况下，在DevOps管道上构建Web应用程序时，需要同时构建前端和后端。由于大多数DevOps平台使用代理来支持并行性，因此可以将前端构建和后端分离到不同的代理中。因此，完成构建所需的时间减少了。如果将DevOps步骤划分为构建和发布管道，您甚至可以在发布管道上组合前端和后端构建工件（前提是两者都部署到同一台服务器）。此外，即使在构建管道中，也可以使用额外的步骤来执行并行操作。重要的是使用并行性试验各种优化并评估它们对整体DevOps的影响，以便根据吸取的经验教训进行改进。5.自动化测试的有效执行最后，我想迈出关键的一步，需要在DevOps流水线中设置。虽然最好在PullRequest级别（最好在开发人员的设备上）执行这些步骤，但您需要根据测试执行时间来确定正确的执行位置。例如，作为质量门的一部分，在拉取请求构建时执行单元测试是一种常见的做法。但是，如果执行需要几分钟（这是常见情况），那么在此级别运行E2E测试可能会产生开销。因此，评估情况并决定在不同级别运行E2E测试用例至关重要。来源：unsplash如您所见，我们可以对DevOps进行不同的改进，以提高效率并提高应用程序的整体质量。此外，其中一些技术也适用于后端。虽然本文只讨论了五种策略，但这些策略的方向可能有助于进一步改进管道以提高其性能（例如根据构建步骤进行各级缓存的技术）。但同样重要的是要注意，每项改进都是有代价的。如果您使用相同的缓存示例，您应该知道，即使您为NPM依赖项指定了自动更新小补丁，也有可能不会使用库的最新更新。最后，希望这些步骤能帮助您更好地使用DevOps并改进您现有的管道。
