webpack搭建前端项目-react搭建项目webpack

作为运营和商家搭建营销活动页面的主要系统，通天塔多年来一直致力于为用户提供更丰富、更强大的建筑体验。作为通天塔直接运营和建设的第一层，通天塔视觉CMS（简称可视化）在系统能力越来越强大的同时，自身的代码量和复杂性也不可避免地变得越来越复杂。面对这个庞大系统的研发，在开发过程中，往往需要在建设和发布阶段等待一段时间，这主要体现在：

基于对研发人员效率的重视，该团队在 2020 年第一季度优化了构建和发布流程。由于系统已经在线运行了很长时间，综合考虑系统稳定性等因素，力求以最小的调整带来最大的改进，为将来扩展其他工程能力打下良好的基础。

优化概括和结果

针对上述情况webpack搭建前端项目，我们优化了项目建设、依赖建设、预发布三种场景，具体如下：

经过Q1的持续优化，取得了以下优化结果：

图 1：构建和编译方案中的优化结果

图 2：模板依靠资源来构建包装优化结果

图 3：预发布阶段的构建优化结果

图 4：预发布全流程优化结果

数据来源：04.10 为 Q1 优化 10 测试平均值

从数据中可以直观地发现，优化的构建和发布过程的各个方面都得到了显著的改进。但是，有些学生可能会想知道为什么主要项目建设比优化前慢。事实上，在日常开发过程中，初始构建往往是低频操作，大部分构建会在缓存的前提下进行增量和二次构建。刀片上使用优质钢材，因此在初始构建期间，它会在缓存上花费更多的开销，以换取更高的频率增量和辅助构建性能改进。

整体优化完成后，我们惊喜地发现，国内网站可视化主应用初始发布的总时间从 358.1 秒下降到 160.1 秒。团队中的每个开发人员每天重复多次预发布操作，每周为团队节省大约 6.9 小时的工时！

优化方案

1. 准备

经过多年的前端开发，现在大多数应用程序都是使用 webpack 构建的。我们也不例外，本质上 webpack 是现代 JavaScript 应用程序的静态模块打包器。它以递归方式构建依赖关系图，并将其包含的每个模块打包到一个或多个捆绑包中。

打个比方，WebPack是一个硬砖移动器，他可以通过各种插件和工具更快地移动砖块，并组合更小，更稳定的墙壁。如何提高webpack的砖块清除速度和质量是我们在施工优化中需要实现的。

因此，获取构建每个流程的数据并衡量 Webpack（一个勤奋的砖块搬运工）的效率是优化前第一步必须做的事情。经过一系列筛选，团队在构建和打包过程中陆续引入了速度-测量-webpack-插件、剖析插件、webpack-bundle-analyzer、stats-webpack-plugin 等性能指标，用于加载器和插件性能、打包量和资源依赖性、构建和增量构建速度等性能指标。这些数据在定位性能瓶颈、发现异常性能节点、查看优化效果等方面发挥着关键作用。

图 5：通过 webpack-bundle-analyzer 分析捆绑包大小和依赖关系

2. 构建优化

在结合性能数据和分析后，我们一致认为，使 webpack 砖移动得更快的关键是让更多的工人参与移动砖块，并让每个工人只移动必要的砖块，即多线程、多进程和最小化需要为单个构建编译的内容。

再次划分方案后，得到以下地图：

图

6：Webpack 构建优化图

之后，是时候进行详细的工作了，例如方案制定webpack搭建前端项目，工具筛选，数据比较以及每个角度的测试行走检查。

但是在执行整个方案之前，webpack3 = “ webpack4 升级是必需的。整个 webpack 升级最大的难点是它不再支持一些插件和加载器，这在大多数情况下可以通过 npm 升级来解决。但是，块分离、代码压缩等方面的变化非常大，这里有一个简单的列表来可视化这些部分中的配置。

图 7：用优化替换 CommonChunkPlugin 和 UglifyJsPlugin

最终，团队共进行了 27 个详细的优化项目，以提高 webpack 构建效率，减小构建包的大小，并取得了明显的效果。

3. 依赖优化

在构建可视化主项目之前，会打包模板和其他依赖项，每个模板相当于一个用 webpack 打包的前端小项目。优化前采用单进程串行打包，即打包一个模板，再打包另一个模板。这里我们使用并行 webpack，可以同时创建多个 webpack 实例，并行打包多个进程，大大减少了依赖资源的构建时间一半以上。

4. 预发布优化

由于历史原因，可视化暂存环境的发布也依赖于FTP来上传资产。然而，传统的FTP上传工具存在每个版本必须满载且上传速度慢的缺点，导致大量时间花费在等待研发上。因此，在进行工程之前，团队对FTP工具进行了一些优化，例如：通过哈希、并发上传和其他修改来确定是否存在缓存。首次上传时间大大减少，更改较小时发布时间可以减少到 10 秒以内。

图8：通过自主研发的FTP工具上传

总结与展望

经过优化，Babel 项目的构建和分发效率得到了显著提升，它帮助研发部门更好地了解 webpack 的工作原理。同时，我们将把这种优化经验运用到其他项目中，比如通天塔国际站，进一步提高团队的整体人力效率。

展望未来，Babel 团队将继续专注于前端工程建设，通过 Puppeteer、Jest、Jenkis 等工具，赋予团队更快、更稳定、更高质量承载 Babel 丰富多变业务的能力，并希望以此为契机，与您一起推动更多前端工程业务建设。