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

【问题标题】：How do you go about refactoring the front-end of a large website?如何重构大型网站的前端？
【发布时间】：2010-08-11 13:19:05
【问题描述】：

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

什么是棘手的：

可用工具：

【问题讨论】：

你需要重构它吗？但客户很高兴……这两种说法似乎不一致。
除非你能说服客户它需要完成，否则当不可避免的引入系统的新错误出现时，你将如何向他们解释？客户很可能会因为一开始没有正确完成而感到恼火。听起来像一个没有胜利的情况。 +1 福斯科
@starskythehutch 这与我有关 +1 对你们俩
事情是，我的老板正在给网站贴上白标签，并希望保持前端几乎相同，如果我留下来，我可能会在接下来的几年里致力于此
所以你的老板想修改应用程序而不告诉客户？这是我从哪里来的严重不当行为！

【解决方案1】：

一些想法（在进行了更大的重构之后，尽管更多的是在后端）：

创建一个播放分支，您可以在其中开始“涂鸦”重构。在那里你可以看到重构的感觉。我经常发现特别大的重构就像开始设计/编程。你必须亲自动手，看看你的重构目标感觉如何。这也有助于更好地估计整体工作量。
因为您的客户很高兴，并且更多的是对未来的投资，所以采用增量方法。不要进行大爆炸式重构。尝试划分几个重构区域（例如 javascript 与 CSS）以及按页面。
从更简单的重构步骤开始。它们有助于让您“适应”困难的人。
scm 是您最重要的朋友之一。在重构时快速恢复并感到安全是至关重要的。即使在您的重构分支上进行更大的工作，您也可以创建更多的“小分支”以继续进行更大的重构步骤。
回归测试至关重要。首先进行测试。几乎不可能实现 100% 的测试自动化，因此请让您的 QA/测试团队成员在每个更大的重构步骤之后帮助您进行重构和回归测试。重构 3 个月后的“它不再起作用”只会让你崩溃。
对于更困难的重构（难以测试）和易碎的代码结构，请执行“结对编程”。
担心后端开发人员不信任大重构是正确的，认真对待并寻求帮助（尤其是回归测试需求）。

【讨论】：

【解决方案2】：

嗯，在我看来，您面临的主要问题是缺少现有的 JavaScript/Selenium 测试。一旦你准备好这些，你就可以开始真正的重构工作，采取一些小步骤——相信错误会被纠正。

如果没有先进行测试，切勿重构。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

这里有一些想法：

花几个小时浏览网站，点击浏览，了解功能
将核心页面归零，或您希望重点改进的页面。花一个小时在上面
开始查看更重要的内容： A）您或其他人进入并扩展功能的可维护性/快速能力 B）页面加载性能 - 你如何将它减少 100kb 以上，并根据它的网站类型考虑它是否真的值得 C) 用户界面延迟。网站加载后感觉如何粘滞，间歇性转换，网站感觉有多慢。

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

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

在您自己的服务器上重新创建单个页面的相同文件层次结构，在现有缓慢/不可靠/不断变化的环境/实时站点或其他任何东西之外，这样您就可以加快您将要处理此问题的速度（大约 3 /4 天）
在开发/研究/随时记录任何内容/中断、管理其他项目等之间切换顶部空间（大约 1 小时）
创建您想要的任何测试并从头开始开发并模拟现有的 fe 架构，完全按照您的需要编写。（每个组件 1 天 - html、可访问性、sass、js 等）
考虑如何将这个单一组件集成到现有架构/环境中，并在不破坏周围任何东西的情况下移除现有部分。
将其重新集成到环境中。时间就是金钱，但在开始项目之前进行彻底的调查将保护您并为您与企业主进行重要讨论做好准备。

【讨论】：