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

Question

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

有什么棘手的：

• 许多过于复杂的脚本
• 具有巨大文件大小的过度复杂的 CSS
• 没有进行硒测试
• 没有 js 测试到位
• 后端开发人员担心任何破坏
• 该网站已上线一段时间，客户很满意

可用工具：

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

Answer 1

一些想法（在后端进行了更多的重构之后）：

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

Answer 2

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

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

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

Answer 3

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

在没有先进行测试的情况下，永远不要重构。

Answer 4

这里有一些想法：

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

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

一旦你觉得你知道所有可能的用户旅程和你挑出的特定组件的变化，请考虑执行以下操作需要多长时间：

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