JS 重构 Yapi：再见，Ykit；你好，Webpack 4！

作为一名积极参与 Yapi 开发的工程师，我经常使用 Ykit 进行构建。Ykit 是基于 Webpack@3.8.1 的二次封装，起初使用起来非常方便。但随着项目规模的不断扩大，代码量的增加以及开发强度的提升，Ykit 的局限性开始显现，导致开发体验下降。因此，我决定对 Yapi 的构建脚本进行重构，将 Ykit 替换为 Webpack@4。

为何选择 Webpack 4？

Webpack 是一个模块打包工具，广泛用于现代前端开发中。与 Ykit 相比，Webpack 4 具有以下优势：

• 构建速度更快： Webpack 4 采用多进程架构，可以并行处理多个模块，大幅缩短构建时间。
• 支持更丰富的插件生态： Webpack 4 提供了更丰富的插件生态，可以满足各种定制化的构建需求。
• 更好的模块管理： Webpack 4 采用了更先进的模块管理机制，可以更好地处理模块之间的依赖关系，避免循环依赖等问题。

重构过程与实践

在重构过程中，我遇到了以下几个主要挑战：

• Ykit 依赖替换： Ykit 中包含了许多自定义的插件和配置，需要逐一替换为 Webpack 4 中对应的插件或配置。
• 构建配置优化： 需要对 Webpack 4 的构建配置进行优化，以满足 Yapi 的构建需求。
• 代码迁移： 需要将 Yapi 中使用 Ykit 的代码迁移到 Webpack 4 中。

为了解决这些挑战，我采取了以下措施：

• 逐一替换 Ykit 依赖： 我仔细审查了 Ykit 中的每个插件和配置，并逐一将其替换为 Webpack 4 中对应的插件或配置。
• 优化构建配置： 我阅读了 Webpack 4 的文档，并参考了其他项目中 Webpack 4 的配置实践，对构建配置进行了优化，以满足 Yapi 的构建需求。
• 代码迁移： 我将 Yapi 中使用 Ykit 的代码迁移到 Webpack 4 中，并仔细测试以确保迁移后的代码能够正常工作。

重构后的收益

经过重构，Yapi 的构建效率、开发体验和整体性能都得到了显著提升：

• 构建速度提升： 构建速度提升了 20% 以上，这使得开发人员可以更快地进行迭代和测试。
• 开发体验优化： 由于 Webpack 4 提供了更丰富的插件生态，开发人员可以更轻松地定制构建过程，满足不同的开发需求。
• 整体性能提升： 由于 Webpack 4 采用了更先进的模块管理机制，Yapi 的整体性能得到了提升，UI 响应速度更快，加载速度也更迅速。

总结

通过对 Yapi 构建脚本的重构，我将 Ykit 替换为 Webpack@4，获得了显著的收益。这不仅提高了构建效率和开发体验，还增强了整体项目性能。此外，通过这次重构，我也对 Webpack 4 有了更深入的了解，为今后的前端开发工作奠定了坚实的基础。

我希望我的分享能对其他遇到类似问题的开发者有所帮助。如果您在 Yapi 开发或前端构建方面有任何疑问，欢迎随时与我交流讨论。