当前位置：首页 > news >正文

Webpack优化——将你的构建效率提速翻倍

news 来源：原创 2024/5/7 9:48:42

新书速递

导读：Webpack是一个开源的JavaScript模块打包工具，其最核心的功能是解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，最终合并为JS文件。这个过程就叫作模块打包。你可以把Webpack理解为一个模块处理工厂。我们把源代码交给Webpack，由它去进行加工、拼装处理，产出最终的资源文件，等待送往用户。

在Web开发中我们打交道的无非是HTML、CSS、JS等静态资源，为什么不直接将工程中的源文件发布到服务器或CDN，而要交给Webpack处理呢？这两者之间有什么不同？本文为你阐述使用Webpack的意义。

什么需要Webpack

开发一个简单的Web应用，其实只需要浏览器和一个简单的编辑器就可以了。最早的Web应用就是这么开发的，因为需求很简单。当应用的规模大了之后，就必须借助一定的工具，否则人工维护代码的成本将逐渐变得难以承受。学会使用工具可以让开发效率成倍地提升，所谓“工欲善其事，必先利其器”就是这个意思。

说回Webpack，既然它解决的最主要问题是模块打包，那么为了更好地阐述Webpack的作用，我们必须先谈谈模块。

何为模块

我们每时每刻都在与模块打交道。比如，在工程中引入一个日期处理的npm包，或者编写一个提供工具方法的JS文件，这些都可以称为模块。

在设计程序结构时，把所有代码都堆到一起是非常糟糕的做法。更好的组织方式是按照特定的功能将其拆分为多个代码段，每个代码段实现一个特定的目的。你可以对其进行独立的设计、开发和测试，最终通过接口来将它们组合在一起。这就是基本的模块化思想。

如果把程序比作一个城市，这个城市内部有不同的职能部门，如学校、医院、消防局等。程序中的模块就像这些职能部门一样，每一个都有其特定的功能。各个模块协同工作，才能保证程序的正常运转。

JavaScript中的模块

在大多数程序语言中（如C、C++、Java），开发者都可以直接使用模块化进行开发。工程中的各个模块在经过编译、链接等过程后会被整合成单一的可执行文件并交由系统运行。

对于JavaScript来说，情况则有所不同。在过去的很长一段时间里，JavaScript这门语言并没有模块这一概念。如果工程中有多个JS文件，我们只能通过script标签将它们一个个插入页面中。

为何偏偏JavaScript没有模块呢？如果要追溯历史原因，JavaScript之父—Brendan Eich最初设计这门语言时只是将它定位成一个小型的脚本语言，用来实现网页上一些简单的动态特性，远没有考虑到会用它实现今天这样复杂的场景，模块化当然也就显得多余了。

随着技术的发展，JavaScript已经不仅仅用来实现简单的表单提交等功能，引入多个script文件到页面中逐渐成为一种常态，但我们发现这种做法有很多缺点：

需要手动维护JavaScript的加载顺序。页面的多个script之间通常会有依赖关系，但由于这种依赖关系是隐式的，除了添加注释以外很难清晰地指明谁依赖了谁，这样当页面中加载的文件过多时就很容易出现问题。
每一个script标签都意味着需要向服务器请求一次静态资源，在HTTP 2还没出现的时期，建立连接的成本是很高的，过多的请求会严重拖慢网页的渲染速度。
在每个script标签中，顶层作用域即全局作用域，如果没有任何处理而直接在代码中进行变量或函数声明，就会造成全局作用域的污染。

模块化则解决了上述的所有问题。

通过导入和导出语句我们可以清晰地看到模块间的依赖关系，这点在后面会做详细的介绍。
模块可以借助工具来进行打包，在页面中只需要加载合并后的资源文件，减少了网络开销。
多个模块之间的作用域是隔离的，彼此不会有命名冲突。

从2009年开始，JavaScript社区开始对模块化进行不断的尝试，并依次出现了AMD、CommonJS、CMD等解决方案。但这些都只是由社区提出的，并不能算语言本身的特性。而在2015年，ECMAScript 6.0（ES6）正式定义了JavaScript模块标准，使这门语言在诞生了20年之后终于拥有了模块这一概念。

ES6模块标准目前已经得到了大多数现代浏览器的支持，但在实际应用方面还需要等待一段时间。主要有以下几点原因：

无法使用code splitting和tree shaking（Webpack的两个特别重要的特性，之后的章节会介绍）。
大多数npm模块还是CommonJS的形式，而浏览器并不支持其语法，因此这些包没有办法直接拿来用。
仍然需要考虑个别浏览器及平台的兼容性问题。

那么,如何才能让我们的工程在使用模块化的同时也能正常运行在浏览器中呢？这就到了模块打包工具出场的时候了。

模块打包工具

模块打包工具（module bundler）的任务就是解决模块间的依赖，使其打包后的结果能运行在浏览器上。它的工作方式主要分为两种：

将存在依赖关系的模块按照特定规则合并为单个JS文件，一次全部加载进页面中。
在页面初始时加载一个入口模块，其他模块异步地进行加载。

目前社区中比较流行的模块打包工具有Webpack、Parcel、Rollup等。

为什么选择Webpack

对比同类模块打包工具，Webpack具备以下几点优势。

1）Webpack默认支持多种模块标准，包括AMD、CommonJS，以及最新的ES6模块，而其他工具大多只能支持一到两种。这对于一些同时使用多种模块标准的工程非常有用，Webpack会帮我们处理好不同类型模块之间的依赖关系。

2）Webpack有完备的代码分割（code splitting）解决方案。从字面意思去理解，它可以分割打包后的资源，首屏只加载必要的部分，不太重要的功能放到后面动态地加载。这对于资源体积较大的应用来说尤为重要，可以有效地减小资源体积，提升首页渲染速度。

3）Webpack可以处理各种类型的资源。除了JavaScript以外，Webpack还可以处理样式、模板，甚至图片等，而开发者需要做的仅仅是导入它们。比如你可以从JavaScript文件导入一个CSS或者PNG，而这一切最终都可以由第4章讲到的loader来处理。

4）Webpack拥有庞大的社区支持。除了Webpack核心库以外，还有无数开发者来为它编写周边插件和工具，绝大多数的需求你都可以直接找到已有解决方案，甚至会有多个解决方案供你挑选。

以上我们对Webpack进行了简要介绍，如果你想快速掌握Webpack的各种技能推荐你阅读《Webpack实战：入门、进阶与调优》一书。

这是一本能指导读者零基础快速掌握Webpack并轻松进阶的实战性著作。

作者是资深的前端工程师，在Webpack领域有深厚的积累，是知名开源打包工具YKit的主导者和核心开发者。本书从功能特性、工作原理、应用实践、性能优化4个维度对Webpack进行了全面的讲解，内容上尽力避免了网络上已经公开发表的各种资料和文档，而是从作者的实际经验出发，将更有价值的内容呈现给读者，尽量帮助读者少走弯路。

全书一共10章：