Webpack学习篇

《深入浅出Webpack》优化篇 01

Webpack 优化可以分为开发优化和输出质量优化两部分，主要要点如下：

优化开发体验，提升开发效率
- 优化构建速度
- 优化使用体验
优化输出质量
- 减少首屏加载时间
- 提升流畅度

本文主要记录 优化构建速度这一部分的内容，本文主要内容如下：

缩小文件的搜索范围
- 优化Loader的配置
- 优化resolve.modules的配置
- 优化resolve.mainFields配置
- 优化resolve.alias配置
- 优化resolve.extensions配置
- 优化module.noParse配置

缩小文件的搜索范围

为什么缩小文件搜索范围可以进行优化?

因为webpack会从entry出发，解析文件导入语句，递归进行解析。遇到导入语句时候，webpack会做以下两件事：

根据导入语句寻找导入文件
根据找到的导入文件的后缀，使用配置的Loader去处理文件。比如我们在兼容低版本浏览器的时候会采用babel-loader将代码编译成ES6之前的代码

在实际开发中，这样的问题无法避免，但是仍需要减少这两件事的发生，以提高速度

优化Loader配置

因为Loader处理文件的转换操作很耗时，所以需要尽可能的减少文件的转换。

可以通过 test、include、exclude 三个配置来命中要转换的文件。为了尽可能少的让文件被Loader处理，我们可以通过include来选中哪些文件需要处理.

举例：

优化resolve.modules配置

resolve.modules的作用是去哪些根目录下寻找第三方模块，默认值是['node_modules'].含义是先去当前的./node_modules目录下去找，如果没找到就往上一级目录，../node_modules,如果还没找到就再往上 ../../node_modules中找，依次类推，大多数情况下，我们的node_modules都是在项目根目录下的，就没有必要再去一级一级查找了，可以直接指明绝对路径，以减少寻找花费的时间。举例：

优化resolve.mainFields配置

安装的第三方包都会有一个package.json文件，某些字段会体现出第三方模块的使用入口在哪里，resolve.mainFields用于配置采用哪个字段作为入口文件的描述，我们可以从axios的package.json中看到如下信息：

然后翻阅axios的源文件，可以看到default.js的如下代码：

可见，axios是同时支持node和浏览器环境的，再来看mainFields字段，他的默认值跟target配置有关系，当target为web或者webworker时，值是[

'browser','module','main'

],当target为其他情况则是['module','main'],为了减少搜索步骤，在明确所有第三方模块的入口文件描述字段的时候，我们可以将其尽可能的设置少。但是使用此配置优化时候，需要考虑到所有运行时的依赖的第三方模块的入口文件描述字段，只要搞错一个，代码就会无法运行

优化resolve.alias配置

该配置是用来优化第三方模块的引入路径的，打个比方，react库在安装的时候会包含两套代码，一套是采用commonJS规范的模块化代码，一套是将React所有相关代码都打包到一个react.js文件中，默认情况下，webpack会从react的入口文件递归解析和处理依赖的几十个文件，工作量非常大。通过配置resolve.alias可以让webpack处理react库的同时，直接使用完整的react.min.js文件，从而跳过耗时的递归解析操作。举例如下：

不过，这样我们的代码可能会包含很多我们压根不会用上的代码，当我们使用的包很大，但是我们用到的东西确很少时候，还是要慎重选择此优化方式。

优化resolve.extensions配置

我们在使用脚手架的时候肯定会发现，即使我们不用加文件扩展名，导入也生效。默认情况下，webpack会尝试给没有文件扩展名的文件添加扩展名，然后再去查找文件是否存在。extensions的默认值是['.js','.json'],如果这个列表越来越长，或者正确的后缀越往后，就会造成尝试的次数越多，所以遵守以下几点，可以优化构建性能：

后缀列表尽可能的小，不要将不可能的情况写到列表中
频繁出现的放在最前面
在源码中尽可能带上后缀名

优化module.noParse配置

noParse配置可以让webpack忽略对部分没有采用模块化的文件的递归解析，比如jQuery这样的库，很大并且没有模块化，解析是一件无意义的事情，配置如下：

好了，以上就是今天的全部内容.

2021-12-12 00:16:14 星期日