你如何重构大型网站的前端？

Question

由于可维护性问题和性能问题，我有一个非常大的网站需要重构前端：

什么是棘手的：

• 许多过于复杂的脚本
• 带有大量文件大小的过于复杂的CSS
• 没有进行硒测试
• 没有js测试
• 后端开发人员关注任何违规行为
• 该网站已暂停一段时间且客户满意

可用工具：

• 用于测试
版本的多台服务器
• Continuos集成设置
• 版本控制

Answer 1

一些想法（在后端方面做了更大的重构之后）：

• 创建一个游戏分支，开始“乱写”重构。在那里你可以看到重构的感受。我经常发现特别重要的重构就像开始设计/编程一样。你必须亲自动手，看看你的重构目标是什么样的。这也有助于更好地估计整体工作量。
• 因为您的客户很满意，而且对于未来的投资更多是采取增量方法。不要做大爆炸重构。尝试划分几个重构区域（例如javascript与CSS）以及页面。
• 从更简单的重构步骤开始。它们有助于让你“适应”更难的人。
• scm是你最大的朋友之一。在重构时快速恢复并感到安全是至关重要的。即使在你的重构分支上进行更大的工作，你也可以创建更多的“小分支”来继续进行更大的重构步骤。
• 回归测试至关重要。首先进行测试。 100％的测试自动化几乎不可能，因此请在每次更大的重构步骤之后，让您的QA /测试团队成员帮助您进行重构和回归测试。经过3个月的重构后，“它不再起作用”只会粉碎你。
• 更难以重构（难以测试）和片状代码结构'编程'。
• 不信任大型重构的恐惧后端开发人员是正确的，认真对待并寻求帮助（特别是对于回归测试要求）。

Answer 2

嗯，在我看来，您面临的主要问题是缺少退出的JavaScript / Selenium测试。一旦你有了这些，你就可以开始真正的重构工作，采取一些小步骤 - 确信错误会被拿走。

如果没有先进行测试，请不要进行重构。

Answer 3

我会开始将项目复制到新工作区并为您的版本控制创建一个位置。这样你的后端开发人员就不再需要害怕了。接下来我会看一下css文件，因为你可以更改它们并立即看到差异。如果您喜欢css，那么您可以继续编写脚本部分。

在这里你肯定需要测试，因为否则肯定会有一些不想要的错误或变化。我个人会将脚本迁移到非常（！）的小型垃圾箱中，这样您就能够非常快速地找到错误，并为您更改的每件小事进行测试。这将导致我的经验中最持久的结果。

您需要考虑的另一件事是部署。我的意思是总有一些要求或依赖（我不知道你的问题是否就是这种情况，但是你应该检查一下并与你的后端人员一起工作，这样他们就可以给你提供一些可能存在问题的提示）。 / p>

Answer 4

以下是一些想法：

• 花几个小时浏览网站，点击，了解功能
• 进入核心页面或您想要关注主要改进的页面。花一个小时就可以了
• 开始查看更重要的内容： A）您或其他人进入并扩展功能的可维护性/快速性 B）页面加载性能 - 如何将它减少100kb以上，并根据它的站点类型考虑它是否真的值得 C）ui延迟。粘性，间歇性过渡，加载后网站的感觉有多慢。

在脑海中想出一个人物。这对你来说是两天的工作吗？ 2周？它对上述所有方面有什么好处？现在考虑一下你雇佣的一些新开发人员需要多长时间，他们现在必须经历与你相同的过程并达到你的水平。

一旦您认识到所有可能的用户旅程以及您挑选出的特定组件的变体，请考虑执行以下操作需要多长时间：

1. 将单个页面的相同文件层次结构重新创建到您自己的服务器上，在现有的慢/不可靠/不断变化的环境/实时站点之外或其他任何位置，以便您可以加快您将要处理的速度（约3） / 4天）
2. 在开发/研究之间切换顶空/随时随地记录任何内容，管理其他项目等（约1小时）
3. 创建您想要的任何测试并从头开始并模拟现有的fe架构，准确地编写您想要它的方式。 （每个组件1天 - html，辅助功能，sass，js等）
4. 考虑如何将这个单一组件集成到现有的架构/环境中，并删除现有的组件而不会破坏它周围的任何东西。
5. 将其整合回环境中。时间就是金钱，但在开始项目之前进行彻底调查将保护并为您与企业主进行重要讨论做好准备。