前端重构的 5 个技巧

在过去的两个星期里，我一直在 Gusto 从事一个非常大的重构项目，我意识到这是我第一次如此顺利地完成这样的项目。整个过程中没有遇到任何问题，花费的时间与我预期的差不多，而且没有人对我生气。事实上，事情进展得几乎好得令人怀疑。这是怎么回事？问题出在哪里？

好吧，我们 CSS 的组织方式存在问题。我们应用中的某些页面加载了 Bootstrap，而有些则没有。另一些只加载了我们的应用样式，还有一些则没有加载我们从组件库（一个包含所有表单、按钮和变量等的单独仓库）提供的样式。这导致了各种设计不一致的问题，但最重要的是，不清楚如何在我们的应用中编写 CSS。组件库样式是否覆盖 Bootstrap？Bootstrap 是否覆盖应用样式？这令人感到害怕。

因此，我们的目标相当复杂。首先，我需要弄清楚我们的样式是如何在应用中加载的。其次，我想从我们的 node_modules 中移除 Bootstrap，并创建一个包含所有这些样式的新 Sass 文件。第三，我需要移除所有 Bootstrap 样式，并将它们放到组件库中，这样我们就可以将 Bootstrap 的每一行代码重构到各个组件中（因此，Tabs.jsx 组件的所有样式都只由 Tabs.scss 文件进行样式化）。所有这些工作应该能够减少我们编写的 CSS 代码量数千行，并使我们的代码库更易读，并且在未来对开发人员更加友好。

但是，在我开始之前，我知道一切都必须井井有条，因为这将涉及到我们的代码库的重大变动。会有电子表格！会有一个简洁明了的拉取请求！瞧！还会有供所有人阅读的漂亮、完整的文档。

因此，根据我在这个大型复杂代码库上的工作经验，以下是一些确保大型重构项目顺利进行的技巧。让我们开始吧！

技巧 #1：收集尽可能多的数据

对于这个项目，我需要事先了解很多东西，即以数据形式呈现。这些数据将作为衡量成功的指标，因为如果我能证明我们可以安全地移除应用中 90% 的 CSS，那么这将是一个巨大的胜利，团队的其他成员可以一起庆祝。

如今，我最喜欢的 CSS 重构工具是 Chrome DevTools 中的代码覆盖率选项卡，因为它可以显示应用于任何给定页面的 CSS 代码量。请查看这里

它向我展示了我需要的所有信息：我们生成的 CSS 文件数量、这些文件的大小以及我们可以安全地从该页面删除的 CSS 代码量。

技巧 #2：列出所有需要做的事情

我在 Gusto 从事的第一重构项目完全是一场噩梦，因为我直接跳入代码库并开始破坏东西。我会在这里移除一个类，在那里移除一个元素，很快我就发现自己修改了数千行 CSS 并破坏了数百个自动化测试。当然，这一切都是我的错，导致很多人对我生气，而且他们有理由生气！

这是因为我没有写下我想做的事情以及我需要按照什么顺序去做。一旦你做了这件事，你就可以开始理解项目的实际范围有多大。

技巧 #3：保持专注

我在第一个重构项目中犯下如此巨大错误的第二个原因是我没有专注于一项非常具体的任务。我只是根据我的感觉改变东西，这不是管理项目的方式。

但是，一旦你列出了这些任务，你就可以将它们进一步分解成你需要进行的每个单独的拉取请求。所以你可能已经在这么做了，但我强烈建议你尝试使每次提交都尽可能地专注和精简。你需要有耐心（我当然缺乏这种品质）和决心。在重构项目期间，缓慢的小步总是比一个包含数十个不相关提交的大型、不专注的拉取请求更好。

如果你在重构过程中发现 CSS 或设计方面的新问题，请不要急于修复它，相信我。这会分散你的注意力。相反，专注于手头的任务。你随时可以稍后处理其他事情。

技巧 #4：告诉每个人你正在进行这个项目

这可能只是我个人面临的一个问题，但我直到最近才意识到前端开发在多大程度上是一项团队合作。工作的真正难度不在于你是否掌握最酷炫的 CSS 技术，而在于你是否愿意与团队的其他成员沟通。

告诉每个人你正在进行这个项目，以确保你没有遗漏任何东西。重构大型代码库可能导致边缘情况，进而导致极度痛苦的面向客户的问题。在我们的例子中，如果我搞砸了 CSS，那么我们的应用可能会导致数千人在一周内无法获得报酬。任何一点信息都只能帮助你使这个重构过程尽可能高效和顺利。

技巧 #5：尽可能多地编写文档

我真的很希望我能找到准确的引用，但在艾伦·乌尔曼 (Ellen Ullman) 那本优秀的著作《代码人生》(Life in Code) 的某个深处，她写道编程有点像一本糟糕的书籍翻译。在代码库之外，我们有想法、思考、知识。当我们将这些想法转换为代码时，一些难以言喻的东西将永远丢失，无论你编程能力有多强。

一个有助于翻译过程的小技巧是在拉取请求本身中编写非常详细的消息。你为什么要这样做？你打算如何去做？你打算如何测试你的重构没有破坏所有东西？这正是帮助未来的人了解你的最初意图和目标的信息。

总结

我以非常艰难、漫长和愚蠢的方式学习了所有这些东西。但是，如果你遵循这些技巧，那么大型前端项目肯定会变得更加顺利，对你和你的团队都是如此。我保证。