从 Fis 迁移到 Webpack，一种改变

前言

Webpack从2015年9月第一个版本横空初始至今已逾2载。它的出现，颠覆了一大批主流构建如Ant、Grunt和Gulp等等。腾讯NOW直播IVWEB团队之前一直采用Fis构建，本篇文章主要介绍从Fis迁移到webpack的过程和经验。

迁移动机

我们团队之前一直使用Fis构建前端项目，随着项目规模的不断扩大，Fis的缺点逐渐暴露出来：

• 构建速度慢。Fis构建项目时，需要对所有文件进行扫描，然后根据依赖关系构建出最终的项目文件。这个过程非常耗时，尤其是对于大型项目来说。
• 难以管理。Fis的配置文件非常复杂，而且随着项目规模的扩大，配置文件也会变得越来越大，难以管理。
• 不支持模块化开发。Fis不支持模块化开发，这意味着我们无法将项目拆分成多个模块，然后分别进行开发和测试。

为了解决这些问题，我们决定将前端构建工具从Fis迁移到webpack。webpack是一款现代化的前端构建工具，它具有以下优点：

• 构建速度快。webpack采用增量构建的方式，只对有改动的文件进行构建，因此构建速度非常快。
• 易于管理。webpack的配置文件非常简单，而且支持模块化开发，因此很容易管理。
• 支持模块化开发。webpack支持模块化开发，这意味着我们可以将项目拆分成多个模块，然后分别进行开发和测试。

迁移挑战

在迁移过程中，我们遇到了以下几个挑战：

• webpack的学习成本较高。webpack的配置和使用与Fis有很大的不同，因此我们花了很长时间来学习webpack。
• webpack的构建速度慢。虽然webpack的构建速度比Fis快，但对于大型项目来说，构建速度仍然很慢。
• webpack的内存消耗大。webpack在构建项目时会消耗大量的内存，因此我们需要增加服务器的内存容量。

迁移收益

尽管在迁移过程中遇到了不少挑战，但我们最终还是成功地完成了迁移，并且获得了以下收益：

• 构建速度大幅提升。webpack的构建速度比Fis快很多，这极大地提高了我们的开发效率。
• 项目更容易管理。webpack的配置文件非常简单，而且支持模块化开发，因此我们的项目更容易管理。
• 代码质量有所提高。webpack支持模块化开发，这有助于我们提高代码质量。

迁移中遇到的问题和解决方案

在迁移过程中，我们遇到了以下几个问题：

• webpack的配置复杂。webpack的配置非常复杂，而且有很多选项可供选择，这使得我们很难配置出合适的配置文件。
• webpack的构建速度慢。虽然webpack的构建速度比Fis快，但对于大型项目来说，构建速度仍然很慢。
• webpack的内存消耗大。webpack在构建项目时会消耗大量的内存，因此我们需要增加服务器的内存容量。

为了解决这些问题，我们采用了以下解决方案：

• 使用webpack的默认配置。webpack的默认配置已经非常好了，我们只需要根据需要进行一些微调即可。
• 使用webpack的插件来提高构建速度。webpack有很多插件可以提高构建速度，例如：使用UglifyJsPlugin来压缩JavaScript代码，使用ExtractTextPlugin来提取CSS代码。
• 增加服务器的内存容量。为了解决webpack的内存消耗大问题，我们需要增加服务器的内存容量。

总结

总体来说，从Fis迁移到webpack是一个成功的过程。我们获得了构建速度大幅提升、项目更容易管理、代码质量有所提高等收益。虽然在迁移过程中遇到了一些挑战，但我们都一一克服了。我们希望本文能对其他团队的迁移提供参考。